Change the text with specific checkbox is clicked - reactjs

Question

I have an array of object. I want to change the text to available when checkbox is clicked and unavailable when checkbox is not clicked. The problem I am facing is when I select one item, it changes all the text to the available. How can I change the particular item text that is checked?
import "./styles.css";
import React, { useState } from "react";
const weekSchedule = [
{ day: "Sun", id: 0 },
{ day: "Mon", id: 2 }
];
export default function App() {
const [checkbox, setCheckbox] = useState(false);
const handleClick = (e) => {
setCheckbox(!checkbox);
};
return (
<div className="App">
{weekSchedule.map((day, i) => (
<div
key={i}
style={{
display: "flex",
flexDirection: "row",
justifyContent: "center",
alignItems: "center"
}}
>
<input type="checkbox" checkbox={checkbox} onClick={handleClick} />
<h1>{day.day}</h1>`**enter code here**`
<h2>{checkbox ? "Available" : "Unavailable"}</h2>
</div>
))}
</div>
);
}

Answer 1

You would want to make the checkboxes controlled components: https://reactjs.org/docs/forms.html#controlled-components. Then we can use the index from the map to target changes in state.
import "./styles.css";
import React, { useState } from "react";
const weekSchedule = [
{ day: "Sun", id: 0, checked:false },
{ day: "Mon", id: 2, checked:false }
];
export default function App() {
const [checkbox, setCheckbox] = useState(weekSchedule);
const handleClick = (e,i) => {
const newWeekSchedule = [...checkbox];
newWeekSchedule[i].checked = !newWeekSchedule[i].checked;
setCheckbox(newWeekSchedule);
};
return (
<div className="App">
{checkbox.map((day, i) => (
<div
key={i}
style={{
display: "flex",
flexDirection: "row",
justifyContent: "center",
alignItems: "center"
}}
>
<input value={checkbox[i].checked} type="checkbox" checkbox={checkbox} onClick={(e)=> handleClick(e,i)} />
<h1>{day.day}</h1>`**enter code here**`
<h2>{day.checked ? "Available" : "Unavailable"}</h2>
</div>
))}
</div>
);
}

Answer 2

You have only one state for checkbox. You're mapping all the elements in weekSchedule to one checkbox. If you want them to be separate, you need to keep track of them separately.
import "./styles.css";
import React, { useState } from "react";
export default function App() {
const [weekSchedule, setWeekSchedule] = useState([
{ day: "Sun", id: 0, checked: false },
{ day: "Mon", id: 2, checked: false}
]);
const handleClick = (e,id) => {
let newWeeklySchedArray = [...weekSchedule]
newWeeklySchedArray[id].checked = !e.target.checked;
setWeekSchedule(newWeeklySchedArray)
};
return (
<div className="App">
{weekSchedule.map((day, i) => (
<div
key={i}
style={{
display: "flex",
flexDirection: "row",
justifyContent: "center",
alignItems: "center"
}}
>
<input type="checkbox" onChange={(e)=>{handleClick(e,i)}} />
<h1>{day.day}</h1>`**enter code here**`
<h2>{!weekSchedule[i].checked ? "Available" : "Unavailable"}</h2>
</div>
))}
</div>
);
}
Here's a link for the demo above :)
https://codesandbox.io/s/nostalgic-jones-u11ux?file=/src/App.js