String Template in React JSX

I created a server and inserted some data in it, Now when I want to refer to that data, it's not displaying the name field, I used string templates to read the name field from the server and show it, but it's not working, is there something wrong with syntax? this is my component in React :

const Rank = ({ name, entries }) => {
    return(
        <div>
            <div className='white f3'>
                {` ${name}  , your current rank is ... `}
            </div>
            <div className='white f1'>
                {entries}
            </div>
        </div>
        );
}

{entries} displays right,but i dont receive any data for {name}.

Please note that string literals are part of ES6. If you've not configured the project correctly, the string literals will not work. Try hoisting he string concatenation before return and use it directly in the JSX as:

const rankOutput = name + ', your rank ...';

And use it in JSX as:

{rankOutput}

So final code would look like this:

const Rank = ({ name, entries }) => {
const rankOutput = name + ', your current rank is ...';
return(
    <div>
        <div className='white f3'>
            {rankOutput}
        </div>
        <div className='white f1'>
            {entries}
        </div>
    </div>
    );
}