React unable to run map function on object

JavaScript
#1

///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
#2

Here:

      {i}

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

#3

As @kevinSmith already pointed out, {i} is a problem here. What were you thinking i was?

Also, you should not be accessing the DOM like this when using React. Look at using references instead.

Ids are supposed to be unique. Don’t use the same id attribute for ever button.

1 Like