useRef.jsx

import React, { useState, useEffect } from 'react'

const ViewForm = ({ text }) => <p>text: {text}</p>

const ActionForm = ({ fn }) => {
  const [inputValue, setInputValue] = useState('')
  const handleChange = (e) => {
    setInputValue(e.target.value)
  }
  const handleClick = e => fn(inputValue)
  const textReset = () => {
    fn('')
    setInputValue('')
  }
  return (
    <>
      <input value={inputValue} onChange={handleChange} type='text' />
      <button onClick={handleClick}>set text</button>
      <button onClick={textReset}>reset</button>
    </>
  )
}

const SampleComponent = () => {
  // const [inputValue, setInputValue] = useState('')
  const [text, setText] = useState('')

  useEffect(() => {
    console.log('レンダリング！')
  })

  const handleClick = (value) => {
    setText(value)
    // setText(inputValue)
  }

  // const handleChange = (e) => {
  //   setInputValue(e.target.value)
  // }

  // const textReset = () => {
  //   setText('')
  //   setInputValue('')
  // }

  return (
    <>
      <ActionForm fn={handleClick} />
      {/* <input value={inputValue} onChange={handleChange} type='text' />
      <button onClick={handleClick}>set text</button>
      <button onClick={textReset}>reset</button> */}
      <ViewForm text={text} />
      {/* <p>text: {text}</p> */}
    </>
  )
}

export default function App () {
  return <SampleComponent />
}