/Javascript/React/React setstate in another component

React setstate in another component

// myContainer.js
import React, { useState } from 'react'
import MyChild from 'some/path/myChild'

function MyContainer() {
  const [name, setName] = useState('foo')

  return (
    <MyChild name={name} onNameChange={setName} />
  )
}

export default MyContainer

// myChild.js
import React, { useCallback } from 'react'

function MyChild({ name, onNameChange }) {

  const handleInputChange = useCallback(event => {
    onNameChange(event.target.value)
  }, [onNameChange])

  return (
    <div>
      <input type="text" onChange={handleInputChange} value={name} />
      <div>The name is: {name}</div>
    </div>
  )
}

export default MyChild

Source: stackoverflow.com

Similar codes

0 vote351 views9 answers
How to run a cloned react native project
Javascript React
2 votes327 views1 answer
How to clean react native project
Javascript React
0 vote354 views1 answer
React router redirect with query params
Javascript React
133 votes461 views6 answers
Using bootstrap with react
Javascript React
0 vote326 views1 answer
Npm react native turn by turn navigation
Javascript React
0 vote334 views1 answer
How to cause a whole page reload react redux
Javascript React
0 vote321 views2 answers
How to give data from react native to webview
Javascript React
3 votes318 views1 answer
React proxy error: could not proxy request from localhost:3000 to http localhost:5000 econnreset
Javascript React
3 votes307 views1 answer
Include gif in react
Javascript React
0 vote323 views1 answer
What was the reaction of others bostonh tea party
Javascript React