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()}

Answer 1

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>)
            }
        })
}