Cada botón con información diferente, cuando oprima 1 los otros 3 se oculten y al elegir otro se oculten los demás. dejo el código donde tengo 2 botones funcionando quise añadir otro botón y lo agrega pero no hace el funcionamiento de mostrar su respectivo contenido en el div. en pocas palabras el tercer boton no muestra su contenido. si alguien pudiera ayudarme se lo agradecería :).Muchas gracias. soy nuevo en react.
class Ejemplo extends React.Component {
constructor() {
super();
this.state = { checked: false };
this.handleChange = this.handleChange.bind(this);
}
handleChange(checked) {
this.setState({ checked });
}
render() {
return (
<div>
<div className="col-md-6 mb-2">
<div
className="btn-group btn-group-sm"
role="group"
aria-label="Basic example"
>
{/* Este es el boton 1 */}
<button
type="button"
id="btn-nquote"
className="button2"
onClick={() => this.handleChange(false)}
>
Todos mis cursos
</button>
{/* Este es el boton 2 */}
<button
type="button"
id="btn-flex"
className="button1"
onClick={() => this.handleChange(true)}
>
Recursos
</button>
{/*Este es el boton 3*/}
<button
type="button"
id="btn-flex"
className="button3"
onClick={() => this.handleChange(true)}
>
Tareas
</button>
</div>
</div>
<span>
{this.state.checked ? (
<div /* Este es el div 1 */ className="button1" >
<h4 className="title2">2 Descargas Nuevas</h4>
<hr></hr>
<div className="tarea1">
<FontAwesomeIcon icon={faFile} className="icon-document"></FontAwesomeIcon>
<br></br>
<hr></hr>
</div>
) : (
<div /* Este es el div 2 */ className="button2" >
<div class="seccion-course">
<div className="curso1">
<img className="videos" src= {imagenes.video}/>
</div>