Soy muy nuevo en el desbordamiento de pila y esta es también mi primera publicación, por lo que no estoy seguro de si esta pregunta es lo suficientemente específica/detallada, pero...: estoy tratando de descubrir cómo reemplazar el elemento h2 'Desempaquetar la semana' con el div entre los comentarios. Por ahora, estoy tratando de evitar renderizar un nuevo componente y simplemente ocultar un div hasta que se haga clic en el elemento h2 para ver la información dentro de ese div (mi proyecto está todo en una página/una ruta). Creé una función WeekToggle adjunta a h2, pero no creo que sea la dirección correcta de lo que quiero.

 enter code here

 const weekToggle = () => { console.log('clicked'); return ( <div> <img src="" alt="" /> <h4>Monday</h4> <img src="" alt="" /> <h4>75˚/65˚</h4> </div> ) } return ( <div> <div> <img src={unpackedImg(cityConditions)} alt="" /> <div> <img src={iconImg(cityConditions)} alt="" /> <h1>{cityName}</h1> <h2>{cityTemp}</h2> <div> <div> <h3>{cityConditions}</h3> <p>Conditions</p> </div> <div> <h3>{cityWind}mph</h3> <p>Wind speed</p> </div> <div> <h3>{cityHumidity}%</h3> <p>Humidity</p> </div> </div> </div> </div> <h1>{cityName} unpacked!</h1> <div> {/* after clicking h2 element 'Unpack the Week' replace h2 with this div */} {/* ---------------------------------------------------------------------*/} <h2 onClick={weekToggle}>Unpack the Week</h2> <div> <img src="" alt="" /> <h4>Monday</h4> <img src="" alt="" /> <h4>75˚/65˚</h4> </div> {/* ---------------------------------------------------------------------*/} </div> </div> ) } Weather.propTypes = { weather: PropTypes.object }