Шаблон строки в React JSX

Question

Я создал сервер и вставил в него некоторые данные. Теперь, когда я хочу сослаться на эти данные, он не отображает поле имени, я использовал строковые шаблоны, чтобы прочитать поле имени с сервера и показать его, но он не работает, что-то не так с синтаксисом? это мой компонент в React:

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

{записи} отображается справа, но я не получаю никаких данных для {имя}.

Answer 1

Обратите внимание, что строковые литералы являются частью ES6. Если вы не настроили проект правильно, строковые литералы не будут работать. Попробуйте поднять конкатенацию строк перед возвратом и использовать ее непосредственно в JSX как:

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

И использовать его в JSX как:

{rankOutput}

Итоговый код будет выглядеть так:

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