how can I create a checkbox that is fill when item.availability=1 (for example) elif 0 it's not filled. I can return {item.availability} in Checkbox function but I want something more generique.
export default function Display() {
...
function Checkbox({ value }) {
const [checked, setChecked] = React.useState(true);
return (
<label>
<input
type="checkbox"
defaultChecked={checked}
onChange={() => setChecked(!checked)}
/>
{value}
</label>
);
}
return (
<>
....
{"Availability "}
<Checkbox ({item[0].availability})/>
</div>
</div>
</>
);
}
You can just set the received value prop as initial state of the checked state. Then make the checked prop in the input element depending on the state:
function Checkbox({ value }) {
const [checked, setChecked] = React.useState(value);
return (
<label>
<input
type="checkbox"
checked={checked}
onChange={() => setChecked(checked => !checked)}
/>
{value}
</label>
);
}
Make sure to pass the prop correctly:
<Checkbox value={!!item.availability} />