CODEWITHSUNDEEP
javascripthtmlcssreactjsbabeljs
Thomas T.
Thomas T.

Reputation: 45

Keys not showing up in React

I'm trying to re-create an app from FreeCodeCamp, a Drum Machine using React. It needs a few keys but when I put them into the codepen it does not show the keys. I cant figure out why they are not displaying. I've even been following a video online and my code is seemingly identical to theirs but mine does not show the letters ["Q", "W", "E", "A", "S", "D", "Z", "X", "C"] on screen. I have the React 18.2.0 and react-dom 18.2.0 CDN's linked into the codepen as well. Any ideas? Code is attached.

class App extends React.Component {
  state = {
    keys: ["Q", "W", "E", "A", "S", "D", "Z", "X", "C"]
  };

  render() {
    const { keys } = this.state;

    return (
      <div id="drum-machine">
        <div id="display">
          {keys.map((key, idx) => (
            <Box text={key} key={idx} />
          ))}
        </div>
      </div>
    );
  }
}

const Box = (props) => <div className="box">{props.text}</div>;
* {
  box-sizing: border-box;
}
 body {
  background-color: #38ada9;
  margin: 0;
  min-height: 100vh;
};

.container {
  background-color: #fff;
  height: 100vh;
}
<div id="drum-machine" class="container"></div>

Upvotes: 0

Views: 53

Answers (1)

Hereblur
Hereblur

Reputation: 2164

Seem like you missing this part to actual render your app (append at the end of your code).

...
const { createRoot } = ReactDOM;
const root = createRoot(document.getElementById("drum-machine"));
root.render(<App />)

And also why you have id=drum-machine both in HTML and JSX?. change your HTML to

<div id="root" class="container"></div>

and your JS to

...
const root = createRoot(document.getElementById("root"));
...

Upvotes: 1

Related Questions