/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 vote156 views1 answer
Npm react-dom
Javascript React
16 votes175 views3 answers
What does the useReducer do in react
Javascript React
0 vote155 views1 answer
Reference hook in react
Javascript React
-1 vote172 views1 answer
Date time react component
Javascript React
22 votes176 views4 answers
Reactjs copytoclipboard box
Javascript React
6 votes198 views3 answers
Apply required attribute on input using ternary operator using react js
Javascript React
0 vote476 views1 answer
Ngrok react.js
Javascript React
0 vote149 views1 answer
ExoPlayer with auto linking react native
Javascript React
1 vote159 views1 answer
What is react easy emoji
Javascript React
0 vote150 views1 answer
Eject expo app to android and react native
Javascript React