List functional component

.js

function List({ state, send }) {
  return (
    <div class="list-container">
      <p>
        <input type="text" />
        <button class="add-item">Add</button>
      </p>
      <ul class="list">
        {
          state.fruits.map(item => <li key={item.key}>
            <span>{item.value}</span>
            <button class="delete-item">X</button>
          </li>)
        }
      </ul>
    </div>
  )
}