Как можно добавить строку в идентификатор React JSX div?

Question

Я хотел бы изменить идентификатор div в jsx следующим образом: -

{ ['A','B','C','D'].map((element, cell) => (
    <div id="alphabet_{element}">
        Some
    </div>
)) } 

Но это приводит к

<div id="alphabet_{element}">
    Some
</div>

Как я могу получить фактическое значение {element } в моем идентификаторе div?

Answer 1

попробуйте это:

{ ['A','B','C','D'].map((element, cell) => (
    <div id={`alphabet_${element}`}>
        Some
    </div>
)) } 

Answer 2

Вы назначаете неправильно

Попробуйте изменить это

{ ['A','B','C','D'].map((element, cell) => (
    <div id="alphabet_{element}"> ---> change to <div id={`alphabet_${element}`}> or <div id={"alphabet_"+element}>
        Some
    </div>
)) } 

Answer 3

Использование литералов шаблона для конкатенации переменной со строками.

id={`alphabet_${element}`}

для методов сравнения см.>> 1004 * Литералы шаблона (строки шаблона)