如何在 reactjs 中返回地图函数内部制作条件?

Question

如何在代码块下面使用地图函数在react.js重复？我想重复内部有class specialties_check_list的代码块div有class specialties_check_outer.

<div class="specialties_check_outer">
<div class="specialties_check_list">
<div class="left_side">
<div class="experience_type">
<p><label class="check_boxes"><input type="checkbox"><span class="checkmark"></span></label><span class="label_name">AR/VR</span></p>
</div>
</div>
<div class="right_side">
<div class="experience_type">
<p><label class="check_boxes"><input type="checkbox"><span class="checkmark"></span></label><span class="label_name">Backend</span></p>
</div>
</div>
</div>
<div class="specialties_check_list">
<div class="left_side">
<div class="experience_type">
<p><label class="check_boxes"><input type="checkbox"><span class="checkmark"></span></label><span class="label_name">Computer Vision</span></p>
</div>
</div>
<div class="right_side">
<div class="experience_type">
<p><label class="check_boxes"><input type="checkbox"><span class="checkmark"></span></label><span class="label_name">Data</span></p>
</div>
</div>
</div>
<div class="specialties_check_list">
<div class="left_side">
<div class="experience_type">
<p><label class="check_boxes"><input type="checkbox"><span class="checkmark"></span></label><span class="label_name">Frontend</span></p>
</div>
</div>
<div class="right_side">
<div class="experience_type">
<p><label class="check_boxes"><input type="checkbox"><span class="checkmark"></span></label><span class="label_name">Full Stack</span></p>
</div>
</div>
</div>

Answer 1

// Child component which will return the list of inner content
const myList = (<props if you want to send any>) => (  <div class="specialties_check_list">   
<div class="left_side">
<div class="experience_type">
<p><label class="check_boxes"><input type="checkbox"><span class="checkmark"></span></label><span class="label_name">AR/VR</span></p>
</div>
</div>
<div class="right_side">
<div class="experience_type">
<p><label class="check_boxes"><input type="checkbox"><span class="checkmark"></span></label><span class="label_name">Backend</span></p>
</div>
</div>
</div> )    

// Main class
render() {
return (
//Assuming you have put the data in state
<div class="specialties_check_outer">
{ this.state.data.map((item, index) =>  ( <myList /> ))}  
</div>
)
}