Why doesn't component rerender when state is updated?

MultiScreens is passed an index prop that controls what it displays. Clicking Button triggers an update handler that changes the state prop that MultiScreens uses for its index. When Button is clicked state gets changed but the indexState getting passed in doesn't seem to change. How can I make MultiScreens rerender when indexState is changed?

export default function Modal() {      const [indexState, setIndexState] = useState({idx: 0});            const onIncrement = (e) => {          let newIndexState = {              idx: indexState.idx + 1          }          setIndexState(newIndexState)      }      return (          <>              <MultiScreens index={indexState}/>                            <Button onClick={onIncrement}>                  increment index              </Button>          </>    );  }  

https://stackoverflow.com/questions/66467506/why-doesnt-component-rerender-when-state-is-updated March 04, 2021 at 09:59AM