I have a mapping function which shows JSON values into checkboxes, I'm tried to add the children of these values as checkboxes under the current checkboxes, and it worked fine, but what I am trying to do now is make the show the 2 children checkbox once the parent checkbox is clicked.
I have Side Collection 1 and under it there are children (side 1 and side 2), what I tried but couldn't do is show (side 1 and side 2 checkboxes) once (Side Collection 1 checkbox) is checked, the checkbox values are passed as props from Checkbox.js to Itemlist.js where the fetch/map happens. Would Appreciate it if anyone can explain or demonstrate how this can be achieved.
I have done a the function i want in vanillajs but im not sure how to add it to my react app specially that is within a mapping function, im new to react
Function snippet: https://codepen.io/alaafm/pen/eXGZbO?editors=1010
React Live Snippet: https://codesandbox.io/embed/5w8vwwmn5p?fontsize=14
Checkbox.js
class Checkboxes extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<form className="form">
<div>
<h2>{this.props.title}</h2>
<div className="inputGroup">
<input
id={this.props.childk + this.props.name}
name="checkbox"
type="checkbox"
/>
<label htmlFor={this.props.childk + this.props.name}>
{this.props.name}{" "}
</label>
</div>{" "}
{this.props.options &&
this.props.options.map(item => {
return (
<div className="inputGroup2">
{" "}
<div className="inputGroup">
<input
id={this.props.childk + (item.name || item.description)}
name="checkbox"
type="checkbox"
/>
<label
htmlFor={
this.props.childk + (item.name || item.description)
}
>
{item.name || item.description}{" "}
{/** <img src={this.props.img} alt="" /> <span className="pricemod">{props.childprice} SAR</span>
*/}
</label>
</div>
</div>
);
})}
</div>
</form>
);
}
}
export default Checkboxes;
Itemlist.js
...
<div>
{selectedMod &&
selectedMod.children &&
selectedMod.children.map((item, index) => (
<Checkboxes
key={index}
name={item.name || item.description}
myKey={index}
options={item.children}
childk={item.id}
limit={item.max}
/>
))}
</div>
...
JS Function which i want to add
const myCheck2 = document.getElementById("check2");
const dib = document.getElementById("dib");
function change() {
if (myCheck2.checked) {
dib.style.display = "block";
dib2.style.display = "block";
}
else{
dib.style.display = "none";
dib2.style.display = "none";
}
}
function func2() {
if (this.checked) {
myCheck2.checked = false;
dib.style.display = "none";
}
else {
dib.style.display = "block";
myCheck2.checked = true;
}
}
myCheck2.addEventListener('click', change);
You can use internal state in Checkboxes.js and conditional rendering to show sub-checkboxes.
import React from "react";
import "./Checkbox.css";
class Checkboxes extends React.Component {
constructor(props) {
super(props);
this.state = {
checked: false
}
}
render() {
const input2Checkboxes = this.props.options &&
this.props.options.map(item => {
return (
<div className="inputGroup2">
{" "}
<div className="inputGroup">
<input
id={this.props.childk + (item.name || item.description)}
name="checkbox"
type="checkbox"
/>
<label
htmlFor={
this.props.childk + (item.name || item.description)
}
>
{item.name || item.description}{" "}
{/** <img src={this.props.img} alt="" /> <span className="pricemod">{props.childprice} SAR</span>
*/}
</label>
</div>
</div>
);
})
return (
<form className="form">
<div>
<h2>{this.props.title}</h2>
<div className="inputGroup">
<input
id={this.props.childk + this.props.name}
name="checkbox"
type="checkbox"
checked={this.state.checked}
onChange={() => {
this.setState({checked: !this.state.checked})
}}
/>
<label htmlFor={this.props.childk + this.props.name}>
{this.props.name}{" "}
</label>
</div>{" "}
{this.state.checked ? input2Checkboxes : undefined }
</div>
</form>
);
}
}
export default Checkboxes;
You can take advantage of react component state and for your checkbox.js
component. If state changes, then the component will re-render with the correct checkboxes.
I would suggest having a state with a boolean to know if the slide collection checkbox is selected or not, and have the onChange function of your parent checkbox input look something like this:
<input
id={this.props.childk + this.props.name}
name="checkbox"
type="checkbox"
onChange={()=> this.setState({parentCheckbox:!this.state.parentCheckbox})}
/>
Then in your method where you map through this.props.options to render the children checkboxes, you can have a conditional statement for just the input tag that will have it render only if this.state.parentCheckbox
is true - see the method below.
render() {
return (
<form className="form">
<div>
<h2>{this.props.title}</h2>
<div className="inputGroup">
<input
id={this.props.childk + this.props.name}
name="checkbox"
type="checkbox"
onChange={()=> this.setState({parentCheckbox:!this.state.parentCheckbox})}
/>
<label htmlFor={this.props.childk + this.props.name}>
{this.props.name}{" "}
</label>
</div>{" "}
{this.props.options &&
this.props.options.map(item => {
return (
<div className="inputGroup2">
{" "}
<div className="inputGroup">
{ this.state.parentCheckbox && (<input
id={this.props.childk + (item.name || item.description)}
name="checkbox"
type="checkbox"
/>)}
<label
htmlFor={
this.props.childk + (item.name || item.description)
}
>
{item.name || item.description}{" "}
{/** <img src={this.props.img} alt="" /> <span className="pricemod">{props.childprice} SAR</span>
*/}
</label>
</div>
</div>
);
})}
</div>
</form>
);
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.