CODEWITHSUNDEEP
javascripthtmlreactjs
Pedro Luiz
Pedro Luiz

Reputation: 39

I'm using React and my components are not rendered

I'm trying to follow a React tutorial this code should render some buttons, but it isn't happening. I'm using codepen.io to make the code and I can send the tutorial link if necessary.

const sounds = [
  {
    keyCode: 81,
    keyTrigger: 'Q',
    id: 'Heater-1',
    url: 'https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3'
  },
  {
    keyCode: 87,
    keyTrigger: 'W',
    id: 'Heater-2',
    url: 'https://s3.amazonaws.com/freecodecamp/drums/Heater-2.mp3'
  }
];

function App(){
    return (
        <div className="app-div bg-info min-vh-100 text-white">
            <div className="text-center">
                {sounds.map((clip) => {
                    <Pad key={clip.id} clip = {clip}/>
                })}
            </div>
        </div>
    )
}

function Pad({clip}) {
    return (
        <div className="btn btn-secondary p-4 m-3">
            <audio id={clip.keyTrigger} source = {clip.url}/>   
            {clip.keyTrigger}
        </div>
    );
}

ReactDOM.render(<App />, document.getElementById('app'))

Upvotes: 0

Views: 43

Answers (1)

Anton
Anton

Reputation: 8508

You forgot return your Pad component.

{sounds.map((clip) => {
   return <Pad key={clip.id} clip = {clip}/>
 })}

Upvotes: 1

Related Questions