0

Estou tentando fazer uma condicional em que o componente ativo depende de uma variável do estado.

this.state = {
  display: 0,
}

O estado 0 é o estado inicial, que é mudado quando o usuario clica em um botão.

Dependendo do botão a variável display mudará para um valor de 1 a 4.

{if (this.state.display == '0') {
      return ()
      } else if (this.state.display == '1') {
        return()
      } else if (this.state.display == '2') {
        return()
      } else if (this.state.display == '3') {
        return()
      } else if (this.state.display == '4') {
        return(
          <Catalogo></Catalogo>
        )} 
    }}

O código na íntegra se encontra em github/cmoutella

O erro diz 'Parsing error: Unexpected token' e aponta para o if.

Como eu posso fazer isto?

0

2 Respostas 2

2

Você não pode colocoar IF's dentro do escopo do retorno. Caso queira fazer a lógica dentro do return tem que utilizar a condição ternária.

ex:

render() {
  const {display} = this.state;
  return <div>
      {display == 0 && <Component1/>}
      {display == 1 && <Component2/>}
      {display == 2 && <Component3/>}
      {display == 3 && <Component4/>}
  </div>;
}

Ou então você faz a lógica antes do return e atribui o retorno para uma variável que você irá retornar

ex:

render() {
  const {display} = this.state;
  let retorno;
  if (display == 0) {
    retorno = <Component1/>;
  } else if (display == 1) {
    retorno = <Component2/>;
  } else if (display == 2) {
    retorno = <Component3/>;
  } else {
    retorno = <Component4/>;
  }

  return <div>
   {retorno} 
  </div>;
}
1

O problema que você deve retornar o seu elemento diretamente. Seu método render deveria ser algo como:

  render(){
    if (this.state.display == '0') {
      return ()
    } else if (this.state.display == '1') {
      return()
    } else if (this.state.display == '2') {
      return()
    } else if (this.state.display == '3') {
      return()
    } else if (this.state.display == '4') {
      return(
        <Catalogo></Catalogo>
      )} 
    }
  }

Você somente escopa o código quando já estiver retornando algum elemento, mas mesmo assim, sua condicional deveria retornar um valor. Por isso o if não funciona.

2

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .