Show Checkbox in Div - reactjs

Question

Code:-
export default function TabHeader({ item, index, activeIndex, ontoggle }) {
const [activeLOCK, setActiveLock] = useState(0);
const setLock = (e, ChannelName, ID) => {
setActiveLock(index);
}
<div id="Lock">
<p onClick={(e) => { setLock(e, Delete.val, index) }}>
{activeLOCK === index ? <FaRegCheckCircle style={{ height: "20px", width: "20px", color: "green" }} /> : <FaRegCircle style={{ color: "red" }} />}
</p>
</div>
}
when User click the menu btn then there 1 tab is open with default checkbox when I user click the 2 menu btn 2 tab open(evening) with circle in div but how can I show the checkbox when i click the 2 box div and 1 box div(business)make them red circle remove the checkbox and show the circle
How can I do that? in react
right now getting this(in image):-
but want when user click the div its show checkbox and other show red circle
please help......

Answer 1

I think your problem is you don't modify activeIndex from the parent component
To fix it, you should pass setActiveIndex into your TabHeader like below
export default function TabHeader({ item, index, activeIndex, setActiveIndex, ontoggle }) {
const [activeLOCK, setActiveLock] = useState(activeIndex); //set `activeIndex` as default
const setLock = (e, ChannelName, ID) => {
setActiveLock(index);
setActiveIndex(index); //call your `setActiveIndex` here to update `activeIndex` on the parent component
}
<div id="Lock">
<p onClick={(e) => { setLock(e, Delete.val, index) }}>
{activeLOCK === index ? <FaRegCheckCircle style={{ height: "20px", width: "20px", color: "green" }} /> : <FaRegCircle style={{ color: "red" }} />}
</p>
</div>
}
If you don't have setActiveIndex in the parent component, I'd suggest you add that as state update
const [activeIndex, setActiveIndex] = useState(0)