Error with dynamically mapped radio group

January 13, 2022

I’m trying to dynamically map a radio group from a JSON file. I’ve got that bit figured out but the issue is I can’t seem to add a label to each radio without getting an error. The error is ") expected". I think it’s because the div tag is outside the mapping but I’m not sure. Here is the code for the radio group

  <div onChange={this.onChangeValue}>          
            {candidateData.map((candidate) => (
                <input type="radio" value={candidate.name} name={candidate.name}/> This is where I want to add the label that throws an error
            ))}
      </div>

Here is the JSON

{
"candidates":[
            {
              "name":"Uncle Ruckus",
              "politics":"R-District 21",
              "img":"./Candidates/uncleruckus.jpg"
            },
            {
              "name":"Uncle Ruckus",
              "politics":"R-District 21",
              "img":"./Candidates/uncleruckus.jpg"
            }
          ]
}

I hope that makes sense. I’m happy to clarify anything. Thanks in advance.

>Solution :

Wrap your input with a react fragment(<Fragment> </Fragment> ) or empty (<></>) tag

 {candidateData.map((candidate) => (
     <>
        <input type="radio" value={candidate.name} name={candidate.name}/> 
        This is where I want to add the label 
     </>
  ))}