Генерация уникальных идентификаторов и узлов элементов JSX - React

Question

Сейчас у меня небольшая головная боль. Я создаю платформу для викторин с помощью React, и в настоящее время у меня есть компонент вопросов, который использует, где внутри вы можете добавить столько, сколько захотите. Однако я хочу, чтобы эти ответы имели уникальный идентификатор, когда я отправляю тест на сервер (еще не так далеко).

Когда я пытаюсь использовать {this.props.qNo}, я получаю сообщение об ошибке: "this: this '...' ожидал ts(1005)"

Кто-нибудь может сказать мне, что я делаю не так? Наверное, что-то глупое представляю!

Отдельные компоненты ответа

import React from 'react';

class AnswerText extends React.Component {
    constructor(props){
        super(props);
    }



    render(){
        return (
            <div className="input">
                <label htmlFor="answer1">Answer {this.props.qNo}</label>
                <input name="answer1" type="text" id="answer"{this.props.qNo}></input>
                <input type="checkbox" name="answerCheck" id="answerCheck" ></input>
            </div>
        )
    }
}
export default AnswerText;

Код AddTextQuestion

import React from 'react';
import '../css/addQuestion.css';
import AnswerText from './answerText.js';

class AddTextQuestion extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            noAnswers: 0
        }
        this.addAnswer = this.addAnswer.bind(this);
    }

    addAnswer(){
        this.setState({
            noAnswers: this.state.noAnswers + 1
        })
    }

    render(){

        let answers = [];
        for(let i = 0; i < this.state.noAnswers; i++){
            answers.push(<AnswerText key={i} qNo={i + 1} />)
        }

        return (
        <div className="qContainer">

            <form className="addQForm">
                <div className="questionContainer containers">
                        <h3 className="qNo">Question {this.props.qNo}</h3>
                        <div className="input">
                            <label htmlFor="question">Question</label>
                            <input name="question" type="text" id="question"></input>
                        </div>
                </div>
              
                <div className="answerContainer containers">
                    <button type="button" onClick={this.addAnswer}><i className="material-icons">add</i> Answer</button>
                    {answers}
                </div>
            </form>
        </div>
        );
    }
}

export default AddTextQuestion;

Кто-нибудь может помочь?

Спасибо

Answer 1

Я думаю, что ты хочешь сделать, это

 <input name="answer1" type="text" id={`answer${this.props.qNo}`}></input>

Возможно ли, что id="answer"{this.props.qNo} все скидывает?