Show Checkbox in Div

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)