Estoy tratando de recrear una aplicación de FreeCodeCamp, una máquina de ritmos usando React. Necesita algunas llaves pero cuando las pongo en el codepen no muestra las llaves. No puedo entender por qué no se muestran. Incluso he estado siguiendo un video en línea y mi código es aparentemente idéntico al de ellos, pero el mío no muestra las letras ["Q", "W", "E", "A", "S", "D", " Z", "X", "C"] en la pantalla. También tengo los CDN de React 18.2.0 y react-dom 18.2.0 vinculados al codepen. ¿Algunas ideas? Se adjunta código.
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>Parece que te falta esta parte para renderizar tu aplicación (agregar al final de tu código).
... const { createRoot } = ReactDOM; const root = createRoot(document.getElementById("drum-machine")); root.render(<App />) ¿Y también por qué tienes id=drum-machine tanto en HTML como en JSX? cambia tu HTML a
<div id="root" class="container"></div>y tu JS a
... const root = createRoot(document.getElementById("root")); ...