Accepted answer

It is due to this fact that state always updates after rerendering, so when you pass it to upper component, it still has its previous value! To solve this problem you have two solutions:

  1. update your code as follow:
const listChangeHandler = (e) => {
    let temp = [...ingredientList, ingredient];
    inputIngredient.current.value = "";;
  1. use useRef instead of useState because in contrast to state, ref updates imediately.

Related Query

More Query from same tag