/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 vote283 views1 answer
Fetch is not defined jest react
Javascript React
5 votes279 views4 answers
Google map in react js
Javascript React
0 vote330 views1 answer
Add Multilanguage Support to React App
Javascript React
1 vote302 views1 answer
Using React useRef hook to focus input field on button click
Javascript React
0 vote282 views1 answer
Line separator with text in the center react native
Javascript React
1 vote263 views1 answer
Hide column in antd table using js / react with conditional rendering
Javascript React
0 vote298 views1 answer
Content uri react native fs
Javascript React
-2 votes291 views1 answer
How to identify debug and release build in react native
Javascript React
1 vote295 views1 answer
When i go srource in react app in chrome i see my files
Javascript React
0 vote294 views1 answer
Start to work with a pre existing react projects
Javascript React