Want to mapping checkboxes inside checkboxes ReactJS? This is what is missing in your code. Here is a working sandbox and here is how you can fix it:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | const input2Checkboxes = this.props.options && this.props.options.map((item, index) => { // Is the option a 'group' or an 'ingredient'? return item.type === "group" ? ( {/* It's a group so display its options recursively */} <Checkboxes key={index} name={item.name || item.description} options={item.children} childk={this.props.childk} max={item.max} min={item.min} /> ) : ( {/* It's an ingredient so display a simple checkbox */} <div className="inputGroup2" key={item.name || item.description}> {" "} <div className="inputGroup"> <input id={this.props.childk + (item.name || item.description)} name="checkbox" type="checkbox" onChange={this.selectData.bind( this, this.props.childk + (item.name || item.description) )} /> <label htmlFor={this.props.childk + (item.name || item.description)} > {item.name || item.description}{" "} </label> </div> </div> ); }); |
If you like this question & answer and want to contribute, then write your question & answer and email to freewebmentor[@]gmail.com. Your question and answer will appear on FreeWebMentor.com and help other developers.
