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>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"));
...