<body>
  <div class="h-screen flex items-center justify-center" id="root"></div>

  <script type="text/babel">
    function Fruit({initialValue = '', ...props}) {
      const [inputValue, setInputValue] = React.useState(initialValue)

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

      return (
        <input
          {...props}
          className="col-span-2 border-2   border-black px-4 py-2 outline-none focus:bg-gray-100"
          value={inputValue}
          onChange={handleChange}
        />
      )
    }

    function FruitsList() {
      const [fruits, setFruits] = React.useState(['apple', 'banana', 'grapes'])

      const handleRemove = fruit => {
        const filteredFruit = fruits.filter(f => f !== fruit)

        console.log(filteredFruit)

        setFruits(filteredFruit)
      }

      return (
        <div className="p-6 w-full max-w-sm">
          <div className="flex items-center justify-between">
            <h2 className="text-3xl font-bold text-gray-900 mb-6">
              Fruits ({fruits.length})
            </h2>
          </div>

          <ul className="grid grid-cols-1 gap-y-6">
            {fruits.map(fruit => (
              <li className="grid grid-cols-3 gap-x-6">
                <label
                  className="col-span-3 uppercase mb-2 text-gray-900"
                  htmlFor={fruit}
                >
                  {fruit}
                </label>
                <Fruit id={fruit} className="col-span-2" initialValue={fruit} />
                <button
                  className="bg-black text-white focus:outline-none"
                  onClick={() => handleRemove(fruit)}
                >
                  Remove
                </button>
              </li>
            ))}
          </ul>
        </div>
      )
    }

    ReactDOM.render(<FruitsList />, document.getElementById('root'))
  </script>
</body>

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.9.6/tailwind.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js
  3. https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js