Problem with re render in parent component

user_16762183 0
Viewed 38

Firstchild file:

  const [qtd, setQtd] = useState(props.number);
  function updateNumber(){
    props.setNumber(qtd);
  }

  const handleChange = event => {
    setQtd(event.target.value);
  };


return(
         <input type="number" name="integerTimes" className="integerTimes" placeholder='Insira aqui' id="qtd" onChange={handleChange}/>
        <button id="submitTimes" onClick={updateNumber}>Enviar</button>
);

Parent Component:

const [number, setNumber] = useState(0);

if (number>0){
    return (
      <div id='main'>
        <div>
          <Firstchild setNumber={setNumber} number={number}/>
          <SecondChild number={number}/>
        </div>
      </div>
    );
  }

the problem is, i need 'number' to pass to other child component, but apparently when the parent re-render i lose the update that i made in the first child component. How can i mantain the value of 'number' after changing in the child component?

reactjs
1 Answers

You should have single source of truth especially when you are working with inputs because and inputs have there local state and you have to reference it to an external source in order to work properly.

reference your input's value to your parents state.

return(
         <input type="number" value={props.number} />
);

user_183185520
Related