How can I allow just one input selection in react?

Question

Right now only one selection is allowed between all inputs. I'm not sure how to solve this. I thought the name was supposed to match between all inputs, but perhaps I'm wrong. If I remove it, then there is an endless number of input selections allowed.

How can I fix this? Thank you.

{props.Data.map((item, index) => {
            return (
                <div key={index}>
                    <h3>{item.question}</h3>
                
                    <input
                        type="radio"
                        name="answer option"
                        id={`answer-options-${index}`}
                        value={results}
                        onChange={e => setResults(e.target.value)}/>
                            <label htmlFor={`answer-options-${index}`}>
                                {item.answers[0]}
                            </label>    
                    <input
                        type="radio"
                        name="answer option"
                        id={`answer-options-${index}`}
                        value={results.selectedAnswer}
                        onChange={handleSelectedAnswer}/>
                            <label htmlFor={`answer-options-${index}`}>
                                {item.answers[1]}
                            </label>  
                    <input
                        type="radio"
                        name="answer option"
                        id={`answer-options-${index}`}
                        value={results.selectedAnswer}
                        onChange={handleSelectedAnswer}/>
                            <label htmlFor={`answer-options-${index}`}>
                                {item.answers[2]}
                            </label>
                    <input
                        type="radio"
                        name="answer option"
                        id={`answer-options-${index}`}
                        value={results.selectedAnswer}
                        onChange={handleSelectedAnswer}/>
                            <label htmlFor={`answer-options-${index}`}>
                                {item.answers[3]}
                            </label>
                   
                </div>
            )
        })}   
        <button
            onClick={() => {
                    checkSelectedAnswer();
                    scoreQuiz();
                    finishQuiz()}
                }>
            Check answers
        </button>

Answer 1

It appears you are giving all radio input the same name attribute when in reality you are mapping "sets", or groups, of radio inputs. You want each "set"/group to have a unique name attribute, similarly to what was done for the id attributes.

{props.Data.map((item, index) => {
  return (
    <div key={index}>
      <h3>{item.question}</h3>

      <input
        type="radio"
        name={`answer option-${item.question}`}
        id={`answer-options-${index}`}
        value={results}
        onChange={(e) => setResults(e.target.value)}
      />
      <label htmlFor={`answer-options-${index}`}>{item.answers[0]}</label>
      <input
        type="radio"
        name={`answer option-${item.question}`}
        id={`answer-options-${index}`}
        value={results.selectedAnswer}
        onChange={handleSelectedAnswer}
      />
      <label htmlFor={`answer-options-${index}`}>{item.answers[1]}</label>
      <input
        type="radio"
        name={`answer option-${item.question}`}
        id={`answer-options-${index}`}
        value={results.selectedAnswer}
        onChange={handleSelectedAnswer}
      />
      <label htmlFor={`answer-options-${index}`}>{item.answers[2]}</label>
      <input
        type="radio"
        name={`answer option-${item.question}`}
        id={`answer-options-${index}`}
        value={results.selectedAnswer}
        onChange={handleSelectedAnswer}
      />
      <label htmlFor={`answer-options-${index}`}>{item.answers[3]}</label>
    </div>
  );
})}

A DRY version mapping the array of answers:

{props.Data.map((item, index) => {
  return (
    <div key={index}>
      <h3>{item.question}</h3>
      {item.answers.map((answer) => (
        <React.Fragment key={answer}>
          <input
            type="radio"
            name={`answer option-${item.question}`}
            id={`answer-options-${index}`}
            value={results}
            onChange={(e) => setResults(e.target.value)}
          />
          <label htmlFor={`answer-options-${index}`}>{answers}</label>
        </React.Fragment>
      ))}
    </div>
  );
})}