/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 vote152 views1 answer
React router dom 6 go back
Javascript React
0 vote141 views3 answers
Unexpected template string expression no-template-curly-in-string react
Javascript React
0 vote139 views1 answer
React Redux store exemple
Javascript React
1 vote164 views2 answers
React toastify
Javascript React
0 vote184 views1 answer
React Readonly fractional rating
Javascript React
0 vote144 views1 answer
React catch error json message
Javascript React
0 vote154 views1 answer
Export 'default' (imported as 'Redirect') was not found in 'react-router-dom'
Javascript React
15 votes142 views3 answers
React native expo navigation
Javascript React
0 vote179 views1 answer
Text field drag and drop reactjs
Javascript React
0 vote130 views1 answer
React-navigation headerbackbutton not export member of navigation
Javascript React