Ternary Conditions in React Components className

Question

I am pulling data from a json file and trying to add a class only when a specific condition is met:

    render: function() {
    var gameList = this.props.data.map(function(game) {
        return (
            <li key={game.id} className="list-group-item">
                    {game.home_team_name}
                    <span className="pull-right {game.home.score} > {game.away.score} ? 'highlight':'' ">{game.home.score}</span> <br />
                    {game.away_team_name}
                    <span className="pull-right {game.home.score} > {game.away.score} ? 'highlight':'' ">{game.away.score}</span> <br />
                    {game.status.status}
            </li>   
        );
    });

This method seems to only add whatever is there into the class and not the "highlight" class if the condition is met.

Also is it possible to define a variable again inside the .map method to reduce repetition?

I've tried var homeScore = {game.home.score} but, with no luck

Answer 1

You need to put the whole ternary statement together into brackets :

{parseInt(game.home.score, 10) > parseInt(game.away.score, 10) ? 'highlight':''}

And yes, you can define another variable. Just put it before return:

render: function() {
    var gameList = this.props.data.map(function(game) {
        var classNameExt = parseInt(game.home.score, 10) > parseInt(game.away.score, 10) ? 'highlight':'';
        return (
            <li key={game.id} className="list-group-item">
                    {game.home_team_name}
                    <span className={'pull-right ' + classNameExt}>{game.home.score}</span> <br />
                    {game.away_team_name}
                    <span className={'pull-right ' + classNameExt}>{game.away.score}</span> <br />
                    {game.status.status}
            </li>   
        );
    });

Or to highlight only the winner:

render: function() {
    var gameList = this.props.data.map(function(game) {
        return (
            <li key={game.id} className="list-group-item">
                    {game.home_team_name}
                    <span className={'pull-right ' + (parseInt(game.home.score, 10) > parseInt(game.away.score, 10) ? 'highlight':'')}>{game.home.score}</span> <br />
                    {game.away_team_name}
                    <span className={'pull-right ' + (parseInt(game.home.score, 10) < parseInt(game.away.score, 10) ? 'highlight':'')}>{game.away.score}</span> <br />
                    {game.status.status}
            </li>   
        );
    });