Change child component state in react

Question

I'm new to react. I'm starting to think that I'm wrong but I used to think that you could make the same using Functional syntax or Class-Components syntax. Is there a way to change the state of a child component using Functional components?

I mean something like this...

_onChildClick = (key, childProps) => {
    this.setState({show: !this.state.show})
  }

Thank you in advance

Answer 1

You can do it like this:

 const {useState} = React; function App(){ const [count, setCount] = useState(0); return <div> Current count: {count}<br/> <button onClick={()=>setCount(count-1)}>-</button> <button onClick={()=>setCount(count+1)}>+</button> </div>; } ReactDOM.render(<App/>, document.querySelector('#app'));

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.5/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.5/umd/react-dom.production.min.js"></script> <div id='app'></div>

Hope this helps,

Answer 2

No, a parent component cannot change the state of a child component. The parent can only pass props to its children. This is the same for both functional and class-based components.