Issue
How to change checkbox value not only by clicking on that checkbox input but on the whole button that wraps input and span?
const statuses = ["Draft", "Pending", "Paid"];
const [checkedState, setCheckedState] = useState(
new Array(statuses.length).fill(false)
);
const handleCheckboxChange = (position: number) => {
const updatedCheckedState = checkedState.map((item, index) =>
index === position ? !item : item
);
setCheckedState(updatedCheckedState);
};
{statuses.map((status, index) => (
<button key={index}>
<input
type="checkbox"
onChange={() => handleCheckboxChange(index)}
/>
<span>{status}</span>
</button>
))}
Solution
Move your handleCheckboxChange
function to the button
and use checked
property to input
for handling check-uncheck dynamically. As you see, in the checked
property I give the value dynamically like this checked={checkedState[index]}
.
import { useEffect, useState } from "react";
import "./styles.css";
export default function App() {
const statuses = ["Draft", "Pending", "Paid"];
const [checkedState, setCheckedState] = useState(
new Array(statuses.length).fill(false)
);
const handleCheckboxChange = (position) => {
const updatedCheckedState = checkedState.map((item, index) =>
index === position ? !item : item
);
setCheckedState(updatedCheckedState);
};
return (
<>
{statuses.map((status, index) => (
<button key={index} onClick={() => handleCheckboxChange(index)}>
<input type="checkbox" checked={checkedState[index]} />
<span>{status}</span>
</button>
))}
</>
);
}
And another way is - just use label
instead of button
. In this case you need to give proper styles to the label.
return (
<>
{statuses.map((status, index) => (
<label key={index}>
<input
type="checkbox"
onChange={() => handleCheckboxChange(index)}
checked={checkedState[index]}
/>
<span>{status}</span>
</label>
))}
</>
);
Answered By - Robin
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.