const [list, setList] = useState(initList)

list.map(value, index) => {
  return (
    <Item
      key={ `${ index }${ value.name }${ value.calorie }` }
      // key={ Symbol() }
      item={ value }
      filterHandle={ filterHandle }
      editableHandle={ editableHandle }
      keyPressHandle={ keyPressHandle }
      index={ index }
    />
}

const filteredList = list.filter(value) => {
  return value.calorie < 100
}

const filteredList = list.filter(value) => {
  return value.foo !== event.target.foo
}

const [editable, setEditable] = useState(false)

{
  editable ? (
    <input type="text" defaultValue={ item.name } />
    ) : (
    <h3 onDoubleClick={ editableHandle }>{ item.name }</h3>
  )
}

function editableHandle() {
  setEditable(true)
}

{
  <input
    type="text"
    onKeyPress={ (event) => keyPressHandle(event, index) }
    defaultValue={ item.name }
  >
}

function keyPressHandle(event, index) {
  if (event.key === "Enter") {
    setEditable(!editable)
    const copyList = [...list]
    copyList[index].name = event.target.value
  }
}

function useList(initialState) {
  const [list, setList] = useState(initialState)

  return {
    list,
    removeItem(foo) { // event.target.foo
      const filteredList = list.filter(value => value.foo !== foo)
      setList(filteredList)
    },
    saveItem(index, newValue) { // event.target.value
      const copyList = [...list]
      copyList[index].foo = newValue 
    }
  }
}

const [list, removeItem, saveItem] = useList(initialState)

<form onSubmit={ handleSubmit }>

<span>Foo: </span>
<input
  type="text"
  value={ foo }
  onChange={ handleFooChange }
/>

<select
  value={ bar }
  onChange={ handleBarChange }
>
  <option value="hoge">Hoge</option>
  <option value="huga">Huga</option>

const [foo, setFoo] = useState("defaultFoo")
const [bar, setBar] = useState("defaultBar")

function submitHandle() {
}

function handleFooChange(event) {
  setFoo(event.target.value)
}

<div className="form-field">
  <span>Name</span>
  <input type="text"></input>
</div>
<div className="form-field">
  <span>Age</span>
  <input type="text"></input>
</div>
<div className="form-field">
  <span>Married</span>
  <input type="checkbox"></input>
</div>
<button>Submit</button>

const fooRef = useRef()
const barRef = useRef()
const bazRef = useRef()
const submitRef = useRef()

useEffect(() => {
  fooRef.current.focus()
}, [])

function keyPressHandle(event) {
  if (event.keyCode === 13) {
    if (event.targe.id === "fooInput") {
      barRef.current.focus()
    },
    if (event.targe.id === "barInput") {
      bazRef.current.focus()
    },
    if (event.targe.id === "buzInput") {
      submitRef.current.focus()
    }
  }
}

<input
  ref={ fooRef }
  onKeyDown={ keyPressHandle }
  type="text"
  id="fooInput"
/>

<input
  ref={ bazRef }
  onKeyDown={ keyPressHandle }
  type="checkbox"
  id="buzInput"
/>

<button
  ref={ submitRef }
  onKeyDown={ keyPressHandle }
  onSubmit={ submitHandle }
  id="submitButton"
>Submit</button>

const forwardingRef = useRef(null)

useEffect(() => {
  fooRef.current.focus()
, []}

function fooKeyDownHandle(event) {
  if (event.key === "Enter") {
    bar.current.focus()
  }
}

<Input
  onKeyDownHandle={ fooKeyDownHandle }
  placeholderLabel={}
  ref={ forwardingRef }
>
</Input>

function Input({ onKeyDownHandle, placeholderLabel }, forwardedRef) {
  return (
    <input
      onKeyDown={ onKeyDownHandle }
      placeholder={ placeholderLabel }
      ref={ forwardedRef }
      type="text"
  )
}

const ForwardedInput = React.forwardRef(Input)
export default ForwardedInput

const forwardingRef = React.createRef()
<FancyButton ref={forwardingRef}>Click me!</FancyButton>


const FancyButton = React.forwardRef((props, forwardedRef) => (
  <button ref={forwardedRef} className="FancyButton">
    {props.children}
  </button>
))