React unable to run map function on object

///Problem
Objects are not valid as a React child (found: object with keys {keyCode, text, src}). If you meant to render a collection of children, use an array instead.

There is object named drumsKeys on which i want to run map function .
There const variable name drumElements.

import './App.css'
import React from 'react'

function App() {
  const [drumsKeys, setDrumKeys] = React.useState([
    {
      keyCode: 81,
      text: 'Q',
      src: 'https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3',
    },
    {
      keyCode: 87,
      text: 'W',
      src: 'https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3',
    },
    {
      keyCode: 69,
      text: 'E',
      src: 'https://s3.amazonaws.com/freecodecamp/drums/Heater-3.mp3',
    },
    {
      keyCode: 65,
      text: 'A',
      src: 'https://s3.amazonaws.com/freecodecamp/drums/Heater-4_1.mp3',
    },
    {
      keyCode: 83,
      text: 'S',
      src: 'https://s3.amazonaws.com/freecodecamp/drums/Heater-6.mp3',
    },
    {
      keyCode: 68,
      text: 'D',
      src: 'https://s3.amazonaws.com/freecodecamp/drums/Kick_n_Hat.mp3',
    },
    {
      keyCode: 90,
      text: 'Z',
      src: 'https://s3.amazonaws.com/freecodecamp/drums/Kick_n_Hat.mp3',
    },
    {
      keyCode: 88,
      text: 'X',
      src: 'https://s3.amazonaws.com/freecodecamp/drums/RP4_KICK_1.mp3',
    },
    {
      keyCode: 67,
      text: 'C',
      src: 'https://s3.amazonaws.com/freecodecamp/drums/Cev_H2.mp3',
    },
  ])

  const handleClick = (tagId) => {
    const audio = document.getElementById(tagId)
    audio.play()
  }

  const drumELements = drumsKeys.map((i) => (
    <div
      key={i.text}
      className='drum-pad'
      id='drum-pad'
      onClick={() => {
        handleClick(i.text)
      }}
    >
      {i}
      <audio className='clip' id={i.text} src={i.src}></audio>
    </div>
  ))

  return (
    <div className='App'>
      <div id='drum-machine' className='drum-machine'>
        <div className='drum-pads' id='drum-pads'>
          {drumELements}
        </div>
        <div className='drums-others'>
          <div id='display' className='display'></div>
          <audio src={drumsKeys[1].src} controls></audio>
        </div>
      </div>
    </div>
  )
}

export default App


Here:

      {i}

What are you rendering? Perhaps if you used a better variable name there it would be clearer?

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.