0

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;
5
  • El valor de checked obtiene un booleano, por lo tanto tan solo te devolverá dos valores true o false. 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 un if 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!! el 9 abr. 2021 a las 16:33
  • Déjame aconsejarte un Youtuber que explica de maravilla ReactJS, se llama midudev. Ya verás como tu aprendizaje será más llevadero. el 9 abr. 2021 a las 16:34
  • Gracias por las recomendaciones, revisare ese canal de midudev. el 9 abr. 2021 a las 17:56
  • Parece una tarea de paginación para n componentes (Componente 1,2,3...n), Lo que tu quieres es ir mostrando componente n al dar click en los botones atras/siguiente, ¿Para que los checkboxes? ¿Realmente necesitas los checkboxes? Saludos
    – g.4
    el 9 abr. 2021 a las 19:49
  • lo que pasa es que algunas veces me enredo con el código y la lógica, y pues algunas veces pongo cosas demás o que no necesito,aun sigo aprendiendo el 9 abr. 2021 a las 21:06

1 respuesta 1

0

Hay un par de cosas que debes tener en cuenta:

  1. La variable checked puede ser true o false. Lo que obviamente solo te da dos opciones. Si es true muestras el primer div, si es false muestras el segundo div. No hay forma de mostrar un tercer (o mas) div si es que trabajas con un boolean.

Asi que te recomiendo que en vez de usar boolean, usa numeros para sabes que div debes mostrar

  1. Tu condición esta mal estructurada:

    this.state.checked ? <div>...</div> : <div>...</div> : <div>...</div>

si deseas poner mas condiciones, debes anidar los if en el else:

this.state.checked ? <div>...</div> : (secondCondition ? <div>...</div> : <div>...</div>)

En tu caso seria algo asi:

<span
{ this.state.checked === 1 ?
    <div>
     
    </div>
    : this.state.checked === 2 ?
    <div>
      
    </div>
    :
    <div>
      
    </div>
}
</span>
5
  • Entonces el this.state={checked:1} y comentas que deberias usar numero por eso el elemento uno,pero significaria que deberia usar una sintaxis tipo contador: upCount = () => { this.setState(function (prevState) { return { checked: prevState.count + 1 } }) }; downCount = () => { this.setState(function (prevState) { if (prevState.count >= 1) { return { checked: prevState.count - 1 } } }) }; el 9 abr. 2021 a las 17:53
  • y estas funciones colocarlas en el onclick,algo asi? el 9 abr. 2021 a las 17:56
  • Seria mejor si haces algo como: En el button de back -> this.handleChange(checked-1), y en el de next this.handleChange(checked+1). En el metodo recibes el parametro y haces validaciones. Por ejm si llega 0, no haces nada. Si llega 4 no haces nada. A menos que quieras ir de DIV 3 a DIV 1 -> entonces si llega 4 entonces en el state no vas a poner 4, sino 1. De la misma forma si llega 0 -> pasas de DIV 1 a DIV 3. Depende de ti el 9 abr. 2021 a las 18:31
  • claro,eso también puse antes de preguntar, solo que probé varias cosas,segun VSC dice que checked no esta definida y pues me perdi en ello,pero igualmente gracias el 9 abr. 2021 a las 21:03
  • de nada ! Si tu DIV crecen mas lo mejor seria crear una funcion que retorne el div a mostrar, y ya con con if else (si son mas se vuelve complicado de leer), sino son switch. el 9 abr. 2021 a las 22:05

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.