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

  <script type="text/babel">
    function FruitsList() {
      const [fruits, setFruits] = React.useState([
        {id: 'apple', value: 'apple'},
        {id: 'banana', value: 'banana'},
        {id: 'grapes', value: 'grapes'},
      ])

      React.useEffect(() => {
        const id = setInterval(() => setFruits(shuffle), 1000)

        return () => clearInterval(id)
      }, [])

      const handleChange = fruit => {
        return e => {
          const newValue = e.target.value

          console.log(newValue)

          const newFruits = fruits.map(f => ({
            ...f,
            value: f.id === fruit.id ? newValue : f.value,
          }))

          setFruits(newFruits)
        }
      }

      return (
        <div className="p-6">
          <div>
            <h2 className="text-3xl my-6">Without key</h2>
            <div className="grid grid-cols-2 gap-6">
              {fruits.map(fruit => (
                <input
                  className="border-2   border-black px-4 py-2 outline-none focus:bg-gray-100 focus:border-teal-500"
                  value={fruit.value}
                  onChange={handleChange(fruit)}
                />
              ))}
            </div>
          </div>

          <div>
            <h2 className="text-3xl my-6">With array index as a key</h2>
            <div className="grid grid-cols-2 gap-6">
              {fruits.map((fruit, index) => (
                <input
                  key={index}
                  className="border-2   border-black px-4 py-2 outline-none focus:bg-gray-100 focus:border-teal-500"
                  value={fruit.value}
                  onChange={handleChange(fruit)}
                />
              ))}
            </div>
          </div>

          <div>
            <h2 className="text-3xl my-6">With Proper Key</h2>
            <div className="grid grid-cols-2 gap-6">
              {fruits.map(fruit => (
                <input
                  key={fruit.id}
                  className="border-2   border-black px-4 py-2 outline-none focus:bg-gray-100 focus:border-teal-500"
                  value={fruit.value}
                  onChange={handleChange(fruit)}
                />
              ))}
            </div>
          </div>
        </div>
      )
    }

    function shuffle(originalValues) {
      const array = [...originalValues]
      let currentIndex = array.length
      let temporaryValue
      let randomIndex

      while (currentIndex !== 0) {
        randomIndex = Math.floor(Math.random() * currentIndex)
        currentIndex -= 1

        temporaryValue = array[currentIndex]
        array[currentIndex] = array[randomIndex]
        array[randomIndex] = temporaryValue
      }

      return array
    }

    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