I have a mapping function which shows JSON values into checkboxes, and these checkboxes are shown within each other, I am trying to build a validator which will return true/false based on the checbox checked status, I have done 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.
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.
Function snippet: https://www.w3schools.com/code/tryit.asp?filename=G22IEABXFNP9
React Live Snippet: https://codesandbox.io/embed/047pvkm6rn?fontsize=14
Checkbox.js
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}{" "}
</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;
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
<html>
<body>
Checkbox: <input type="checkbox" id="myCheck">
Checkbox: <input type="checkbox" id="myCheck2">
Checkbox: <input type="checkbox" id="myCheck3">
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<p id="demo2"></p>
<p id="demo3"></p>
<script>
function myFunction() {
var x = document.getElementById("myCheck").checked;
document.getElementById("demo").innerHTML = x;
var y = document.getElementById("myCheck2").checked;
document.getElementById("demo2").innerHTML = y;
var z = document.getElementById("myCheck3").checked;
document.getElementById("demo3").innerHTML = z;
}
</script>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire