/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

38 votes241 views2 answers
How to comment out code in react js
Javascript React
0 vote208 views1 answer
Google pay payment gateway for react js project
Javascript React
0 vote233 views1 answer
How to calc() height in react native for styling
Javascript React
-1 vote231 views8 answers
React native
Javascript React
0 vote269 views1 answer
How to set max length of input in react js
Javascript React
2 votes209 views1 answer
Can't import react bootstrap
Javascript React
15 votes208 views2 answers
React check if url address is valid
Javascript React
1 vote215 views1 answer
React native flatlist pull to refresh
Javascript React
4 votes275 views1 answer
React props.children proptype
Javascript React
1 vote218 views1 answer
React native could not get batchedbridge
Javascript React