SHARE
TWEET

Untitled

a guest Aug 20th, 2019 72 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. // Child Component
  2. // Child Component
  3. // Child Component
  4. import React, { useEffect, useState } from 'react'
  5. import { string } from 'prop-types'
  6.  
  7. const Child = ({ value }) => {
  8.   const [childValue, setChildValue] = useState(value)
  9.  
  10.   useEffect(() => {
  11.     console.log('value changed')
  12.     setChildValue(value)
  13.   }, [value])
  14.  
  15.   return (
  16.     <div>
  17.       child value:
  18.       { childValue }
  19.     </div>
  20.   )
  21. }
  22.  
  23. Child.defaultProps = {
  24.   value: null
  25. }
  26.  
  27. Child.propTypes = {
  28.   value: string
  29. }
  30.  
  31. export default Child
  32.  
  33. // App Component
  34. // App Component
  35. // App Component
  36. import React, { useState } from 'react'
  37. import Child from './Child'
  38.  
  39. const App = () => {
  40.   const [value, setValue] = useState('')
  41.  
  42.   return (
  43.     <div>
  44.       React app
  45.       <input
  46.         type="text"
  47.         name="name"
  48.         id="name"
  49.         onChange={e => setValue(e.target.value)}
  50.         placeholder="Bir seyler yazin"
  51.       />
  52.       <br />
  53.       <Child value={value} />
  54.     </div>
  55.   )
  56. }
  57.  
  58. export default App
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top