/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

2 votes204 views3 answers
There might be a problem with the project dependency tree. It is likely not a bug in Create React App, but something you need to fix locally.
Javascript React
0 vote222 views1 answer
How to create module in react
Javascript React
-2 votes241 views1 answer
React spring transition animations
Javascript React
0 vote230 views1 answer
Use navigate in class component react native
Javascript React
1 vote237 views1 answer
Component vs container react
Javascript React
0 vote230 views1 answer
Dispatch event not working react native redux
Javascript React
86 votes244 views3 answers
React check if window exists
Javascript React
3 votes229 views1 answer
React js image path src from local folder
Javascript React
1 vote245 views1 answer
React native nav bars
Javascript React
3 votes226 views2 answers
React is there a safe area view for android
Javascript React