// Child Component
// Child Component
// Child Component
import React, { useEffect, useState } from 'react'
import { string } from 'prop-types'

const Child = ({ value }) => {
  const [childValue, setChildValue] = useState(value)

  useEffect(() => {
    console.log('value changed')
    setChildValue(value)
  }, [value])

  return (
    <div>
      child value:
      { childValue }
    </div>
  )
}

Child.defaultProps = {
  value: null
}

Child.propTypes = {
  value: string
}

export default Child

// App Component
// App Component
// App Component
import React, { useState } from 'react'
import Child from './Child'

const App = () => {
  const [value, setValue] = useState('')

  return (
    <div>
      React app
      <input
        type="text"
        name="name"
        id="name"
        onChange={e => setValue(e.target.value)}
        placeholder="Bir seyler yazin"
      />
      <br />
      <Child value={value} />
    </div>
  )
}

export default App