React state changes successfully, but doesn't cause rerender

Viewed 8

The prop/state called "parentWeekdays" gets set in the child you're seeing in this code.

useEffect and setInterval on lines 6-7 always log the right value (meaning the one I manually set in the UI)

This means that "parentWeekdays" gets updated successfully, but just doesn't cause a rerender.

When I force the "Weekdays" component to rerender by updating a different parent state, everything else works as expected too.

const Weekdays = ({parentWeekdays, setParentWeekdays}) => {

    //parentWeekDays === [7 Booleans]
    const englishDays = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']

    useEffect(() => console.log(parentWeekdays))
    setInterval(() => console.log(parentWeekdays), 1000)


    return(
        <Box key={uuidv4()}>
            <Header>
            <span>
                Weekdays
            </span>
            </Header>
            <Main>
            {
                englishDays.map((day, index)=> (
                    <SingleWeekday 
                        key={uuidv4()} index={index} 
                        parentWeekdays={parentWeekdays} 
                        setParentWeekdays={setParentWeekdays} 
                        day={day} />))
            }
            </Main>
        </Box>

    )
}
export default Weekdays

const SingleWeekday = ({parentWeekdays, setParentWeekdays, index, day}) => {

    
    const updateParentWeekdays = (a, i) => {
        let newArr = a
        newArr.splice(i, 1, !a[i])
        setParentWeekdays( newArr)
        
    }
    const [isActive, setActive] = useState(parentWeekdays[index])

    const onClickFN = () => {
            updateParentWeekdays(parentWeekdays, index) 
            setActive(prev => !prev)
    }
    return(
        <StyledItem 
        key={uuidv4()} 
        onClick={() => onClickFN()}
        isActive={isActive}
          >
                <span>{day}</span>
                <div>
                <img src={isActive ? check : plus}  alt='checked' />
                </div>
        </StyledItem>
    )
}
0 Answers
Related