エラーが

Question

が、私はこれらのVARSをCONCATする必要が反応し、コンソール画面で、この：

モジュールのビルドに失敗しました：にSyntaxError：隣接するJSX要素をラップする必要があります（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> 

Answer 1

エラーメッセージには、レンダリングメソッド内に1つのjsxタグしか含めることができないことが記載されています。兄弟は許されません。だから、親タグ内にすべての兄弟要素を置くことができます。

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> 
 
}