/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

3 votes202 views1 answer
React after deployment givin nginx 404
Javascript React
0 vote196 views1 answer
React open a link to an outside siite
Javascript React
0 vote247 views1 answer
Modal in react
Javascript React
23 votes247 views4 answers
Change port react app
Javascript React
0 vote204 views1 answer
Get nested value on object react using dot
Javascript React
0 vote290 views1 answer
Make a ReactNative component take the height and width of the current window
Javascript React
0 vote197 views1 answer
React useState vs variable
Javascript React
0 vote211 views1 answer
[Design System React] App element is not defined. Please use Settings.setAppElement(el)
Javascript React
0 vote158 views1 answer
How to define cardTitle background image in mdl in reactjs
Javascript React
5 votes231 views4 answers
How to get url in react
Javascript React