React component is not rendering

1

I’m working on Drum Machine and when I return the HTML component it does not render. This is my pen
Thanks in advance!!

2

  1. You are binding a non-existing method and the bind is not inside a constructor.

  2. The forEach method does not return anything. Use the map method.

  3. You are returning a template literal and not JSX.

3

@lasjorg I corrected the code, still it’s not rendering. Can you please help me out?

4

  1. All tags must be closed, close the source tag.

  2. You are mapping and returning the result to a variable, but not rendering it. Look at the examples in the lists-and-keys docs, scroll to the bottom to see the syntax normally used.

Here is the corrected render method. Compare it to what you have now. I suggest you write it out, do not just copy and paste (you can also replace the div container with a fragment as well).

render() {
  return (
    <div>
      {pads.map((pad) => (
        <button id={pad.id}>
          {pad.keyTrigger}
          <audio>
            <source src={pad.url} />
          </audio>
        </button>
      ))}
    </div>
  );
}
5

@lasjorg Thank you for your patience, I got the app to render. Thanks again

6

Glad to help.

React and JSX can be pretty difficult to wrap your head around at first. Make sure to read the official docs, check out some tutorials on YouTube and read a few articles. The fCC curriculum isn’t really enough on its own to get comfortable with React.

Edit: @Shernz I add some links just in case .

Here is a scrimba course you can check out.


Some React beginner videos
https://www.youtube.com/results?search_query=react+beginner

Happy coding!

7

Thank you for your guidance @lasjorg , I’ll definitely look into it.

1 Like