Error in concat with React

Question

I need to concat these vars, and in the console display this:

Module build failed: SyntaxError: Adjacent JSX elements must be wrapped in an enclosing tag (2520:54)

<RadioGroup id='satisfied' ref='satisfied' name='satisfied-group' selectedValue={this.state.medicalData.satisfaccion ? String(this.state.medicalData.satisfaccion) : this.state.satisfiedSelectedValue} onChange={this.satisfiedSelection.bind(this)}>
    {Radio => (
        <div className='medical-feel-container'>
        {
          arrayDataLabels[0].labelsNumber.map((label) =>
              <Radio id={`satisfied-${label.name}`} ref={`satisfied-${label.name}`}
              disabled={this.state.disableInputsState} type='radio' value=
              {label.number} className='medical-switch-input'/>

              <label htmlFor={`satisfied-${label.name}`} className={`medical-feel-label color-${label.color}`}>
                {label.number}
              </label>
          )
        }
        </div>
    )}
</RadioGroup>

@Borjante I'm edit my code, but the error is the same. The error is in concat, but i don't have idea about that. — Mateo Guzmán, May 03 '17 at 14:11
I can't see no concat, also, please post the full render method — Borjante, May 03 '17 at 14:14
Clearly the error message is indicating that you are returning more than one JSX element in the render method. [link](http://stackoverflow.com/questions/31284169/parse-error-adjacent-jsx-elements-must-be-wrapped-in-an-enclosing-tag) — Borjante, May 03 '17 at 14:16

score 0 · Answer 1 · answered May 03 '17 at 14:07

As the error message says, you can only have 1 jsx tag inside the render method. No siblings allowed. So you can just put all your sibling elements inside a parent tag.

render() => {
  <div>
    arrayDataLabels[0].labelsNumber.map((label) =>

      <Radio id={`satisfied-${label.name}`} ref={`satisfied-${label.name}`} 
      disabled={this.state.disableInputsState} type='radio' value=
      {label.number} className='medical-switch-input'/>

      <label htmlFor={`satisfied-${label.name}`} className={`medical-feel-label color-${label.color}`}>
        {label.number}
      </label>
    )   
  </div>
}

Error in concat with React

1 Answers1