/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 votes117 views2 answers
Merge two styles react native
Javascript React
4 votes142 views6 answers
React-native shadow generator
Javascript React
0 vote127 views1 answer
React native sectionlist filter
Javascript React
0 vote145 views1 answer
Add active class to button onclick react
Javascript React
0 vote128 views1 answer
Mat slider in a reactve form
Javascript React
0 vote137 views1 answer
React native typescript nodejs timeout
Javascript React
8 votes129 views4 answers
React multiple classnames
Javascript React
0 vote133 views1 answer
React native regenerate android and ios folders
Javascript React
0 vote135 views1 answer
Use jsx extension react-native
Javascript React
0 vote122 views1 answer
How to use saved image on react
Javascript React