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>
)
}