I need help in the react code. I am displaying the Checkboxlist of items using api. I need help in pre-select the Checkboxes on Page load. My JSON file contains the data having IsAssigned True/False. If isAssigned is true for that item, item checkbox will be pre-checked on page load.
Please find the react code. Please help me how this can be achieved. Please find my json data:
import React from "react";
export class SetDescItems extends React.Component {
constructor(props) {
super(props);
this.state = {
ProdDescrlist: [],
}
}
componentDidMount() {
this.getProdDescriptions();
}
async getProdDescriptions() {
const url = "/api/getDescriptions”;
await fetch(url)
.then(response => response.json())
.then((data) => {
this.setState({
ProdDescrlist: data,
loading: false
})
})
}
render() {
return (
<div>
<form onSubmit={this.handleSubmit} >
<ul style={{ listStyle: 'none' }}>
{
(this.state.ProdDescrlist.map((item, index) => {
return (
<li key={index}>
<input type="checkbox" id={item.ProdDescription_ID}
value={item.DescriptionTextPlain} onChange={this.handleChange} />
{item.DescriptionTextPlain}
</li>
)
}
))
}
</ul>
<button type="submit" >Submit</button>
</form>
</div>
);
}
}[{“ProdDescription_ID”:2863,”isAssigned”:”TRUE”,”DisplaySequence”:0,”DescriptionTextPlain”:”A1Testig”},
{“ProdDescription_ID”:2865,”isAssigned”:”TRUE”,”DisplaySequence”:0,”DescriptionTextPlain”:”test”},
{“ProdDescription_ID”:1778,”isAssigned”:”FALSE”,”DisplaySequence”:0,”DescriptionTextPlain”:”Testing4″},
{“ProdDescription_ID”:2864,”isAssigned”:”FALSE”,”DisplaySequence”:0,”DescriptionTextPlain”:”A2 “},
{“ProdDescription_ID”:1544,”isAssigned”:”FALSE”,”DisplaySequence”:5,”DescriptionTextPlain”:”ProductGuide”},
{“ProdDescription_ID”:1535,”isAssigned”:”TRUE”,”DisplaySequence”:10,”DescriptionTextPlain”:”testexample”},
{“ProdDescription_ID”:1536,”isAssigned”:”FALSE”,”DisplaySequence”:15,”DescriptionTextPlain”:”Note”}]
import React from “react”;
export class SetDescItems extends React.Component {
constructor(props) {
super(props);
this.state = {
ProdDescrlist: [],
}
}
componentDidMount() {
this.getProdDescriptions();
}
async getProdDescriptions() {
const url = "/api/getDescriptions”;
await fetch(url)
.then(response => response.json())
.then((data) => {
this.setState({
ProdDescrlist: data,
loading: false
})
})
}
render() {
return (
<div>
<form onSubmit={this.handleSubmit} >
{
(this.state.ProdDescrlist.map((item, index) => {
return (
<li key={index}>
<input type="checkbox" id={item.ProdDescription_ID}
value={item.DescriptionTextPlain} onChange={this.handleChange} />
{item.DescriptionTextPlain}
</li>
)
}
))
}
</ul>
Submit
);
}
}