/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

1 vote136 views1 answer
Rich editor react
Javascript React
1 vote140 views1 answer
React native "modalize" above bottom navigation
Javascript React
3 votes241 views2 answers
Center an element react native
Javascript React
0 vote127 views1 answer
Unable to resolve "@react-native-community/masked-view" from
Javascript React
3 votes125 views1 answer
React native netinfo
Javascript React
0 vote212 views1 answer
Disable autocomplete in react fields
Javascript React
0 vote85 views1 answer
React native cross out letter
Javascript React
0 vote123 views1 answer
Sort by attribute in reactjs
Javascript React
3 votes114 views1 answer
Module not found: can't resolve 'react' in 'c:\users\pavlos\desktop\reactjs\hwr\reactproject2\src'
Javascript React
0 vote126 views1 answer
Eject expo app to android and react native
Javascript React