Reactjs function not returning JSX

Question

I am trying to write a function to return JSX, but it does not work, somehow. Are there any conflicts why my function is not returning any value. I've tried strings, lists, but it seems that nothing is returning.

My function:

const modifyScores = () => {
        teams.map(team => {
            if (team.team_name === activeTeam) {
                let scoresList = []

                Object.entries(team).map(([key, value]) => {
                    if (key.startsWith('r')) {
                        const obj = {"round": parseInt(key.substring(1)), "score": value}
                        scoresList.push(obj)
                    }
                })

                scoresList.sort((a, b) => a.round - b.round)
                
                console.log(scoresList)
                //return <Button>test</Button>
                return scoresList.map(s => <Button>r: {s.round}</Button>)
            }
        })
}

My JSX:

{modifyScores()}

topdev87 · Accepted Answer · 2021-02-11 08:39:31Z

3

You should do return inside modifyScores().

const modifyScores = () => {
    return teams.map(team => {
            if (team.team_name === activeTeam) {
                let scoresList = []

                Object.entries(team).map(([key, value]) => {
                    if (key.startsWith('r')) {
                        const obj = {"round": parseInt(key.substring(1)), "score": value}
                        scoresList.push(obj)
                    }
                })

                scoresList.sort((a, b) => a.round - b.round)
                
                console.log(scoresList)
                //return <Button>test</Button>
                return scoresList.map(s => <Button>r: {s.round}</Button>)
            }
        })
}

answered Feb 11, 2021 at 8:39

topdev87

8,7913 gold badges11 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Max Over a year ago

Oh wow, it is actually working. Sorry for this rookie mistake. I am glad you helped me out since I was stuck for about 2 days now!

henk · Accepted Answer · 2021-02-11 08:59:45Z

0

You have two options.

explicitly return the result of teams.map() inside of modifyScores() by prepending a return statement return teams.map()
remove the curly braces around ... => {teams.map()}, which will return the result implicitly.

modifyScores() => teams.map();

For details take a look at the syntax of arrow functions at the MDN referrence

answered Feb 11, 2021 at 8:59

henk

2,8683 gold badges24 silver badges54 bronze badges

1 Comment

Max Over a year ago

Thank you for this additional information

Collectives™ on Stack Overflow

Reactjs function not returning JSX

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related