/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 vote223 views1 answer
Implement cai webchat in react native
Javascript React
1 vote205 views2 answers
Npm youtube-react
Javascript React
0 vote236 views2 answers
This.webview.postmessage is not a function reactnative
Javascript React
3 votes191 views4 answers
Add new array at the back of react state
Javascript React
0 vote214 views2 answers
React 17 hot reload not working
Javascript React
0 vote207 views1 answer
Reactjs fix ios apostrophe encoding
Javascript React
0 vote223 views1 answer
ERROR TypeError: undefined is not an object (evaluating '_reactNative.Styles.m aincont')
Javascript React
9 votes219 views6 answers
React Component
Javascript React
1 vote233 views1 answer
React toggle class
Javascript React
0 vote201 views2 answers
Error: Error: Unable to resolve module react-native-gesture-handler
Javascript React