El código funciona hasta el segundo div pero al intentar colocar un tercer div , tiende al error ( Unexpected token, expected "}" ),en la linea 38 ,que solución debería realizar, o que le falta un evento mas ,un hook? Lo que trato de hacer es realizar un cambio de entre un div y otro con sus respectivas características ,utilizando botones de Atrás y Siguiente, los cuales serán los que controlen esta parte del codigo,iniciando desde el primero y cuando haga clic cambiara al otro div 2 y así de nuevo al tercer div con la posibilidad de regresar al anterior con el botón atrás del div3 al div2 y al div1.
import React, { Component } from "react";
class Ejemplo extends Component {
constructor() {
super();
this.state = { checked: true };
this.handleChange = this.handleChange.bind(this);
}
handleChange(checked) {
this.setState({ checked });
}
render() {
return (
<div>
<div className="col-md-6 mb-2">
<div className="btn-col" role="group" aria-label="Basic example">
{/* Este es el boton 1 */}
<button id="btn-atras" className="btn" onClick={() => this.handleChange(true)}>
Atras
</button>
{/* Este es el boton 2 */}
<button id="btn-siguiente" className="btn" onClick={() => this.handleChange(false)}>
Siguiente
</button>
</div>
</div>
<span>
{this.state.checked ? (
<div /* Este es el div 1 */ className="redcom1" >
<h1>Componente 1</h1>
</div>
) : (
<div /* Este es el div 2 */ className="redcom2" >
<h2>Componente 2.2</h2>
</div>
) : (
<div /* Este es el div 3 */ className="redcom3" >
<h3>Componente 3.3.3</h3>
</div>
)}
</span>
</div>
);
}
}
export default Ejemplo;
checked
obtiene un booleano, por lo tanto tan solo te devolverá dos valorestrue
ofalse
. Es por esta razón que te salta el error, debido a que no espera un tercer valor y porque la condición esta mal formulada y su sintaxis también. Imagino que intestaste hacer unif else if else
. Por lo demás está todo bien. Aunque para estos Componete 1 y 2 puedes crearlos aparte y luego llamarlos importandolos. Suerte!!n
componentes (Componente 1,2,3...n), Lo que tu quieres es ir mostrando componenten
al dar click en los botonesatras/siguiente
, ¿Para que loscheckboxes
? ¿Realmente necesitas los checkboxes? Saludos