1

No codigo desenvolvido em ReacJS abaixo, ele retorna de um campo contendo uma chave "displayPortraitLeft" com valores que variam de true para false, e dependendo do valor (true/false) obtido, gostaria de que ele se comportasse diferente, usasse outro "estilo no css".

{
                 this.state.data.map(obj => {
                    <div className="box-body">
                   <div className="direct-chat-msg undefined">
                             <div className="direct-chat-info clearfix">
                             <span className="direct-chat-name pull-left">{obj.userName}</span>
                             <span className="direct-chat-timestamp pull-left">{obj.time}</span>
                             </div>
                             if(obj.displayPortraitLeft == true){
                              <img className="direct-chat-img" src={obj.portrait} alt="message user image"/>
                            }else{
                              <img className="right direct-chat-img" src={obj.portrait} alt="message user image"/>
                            }
                      <div className="direct-chat-text">{obj.message}</div>
                      </div>

                      </div>
                 })
             }

Com esse codigo, no navegador nao aparece nada: inserir a descrição da imagem aqui

Mas se eu tirar as chaves {} [ apos (obj => e sua callback ] aparece as imagens, imprimi a linha de codigo IF, mas nao a obdece:

inserir a descrição da imagem aqui

UPDATE: ./src/chat/Chat.js Syntax error: C:/Users/henri/Desktop/funcionando/my-app/src/chat/Chat.js: Unexpected token (43:16)

import React, {Component} from 'react';
import './Chat.css';

class Chat extends Component {

  constructor(props) {
  super(props);
  this.state = {
      data:[]
    }
  }
  componentDidMount(){
        let URL = 'urldemessages'

           fetch(URL)
           .then(function(response) {
              let data = response.json()
              return data;
           })
           .then((json) => {
              console.log('Vetor JSON: ', json)
              this.setState({data : json});
           })
           .catch(function(ex) {
              console.log('parsing failed', ex)
           })
  }

  handleClick(){
         console.log('texto inserido pelo usuário');
    }

  render(){
    const mensagens = this.state.data.map(obj => {
      return (
        <div className="box-body">
          <div className="direct-chat-msg undefined">
            <div className="direct-chat-info clearfix">
              <span className="direct-chat-name pull-left">{obj.userName}</span>
              <span className="direct-chat-timestamp pull-left">{obj.time}</span>
            </div>
              {
                if(obj.displayPortraitLeft == true){
                  <img className="direct-chat-img" src={obj.portrait} alt="message user image"/>
                }else{
                  <img className="right direct-chat-img" src={obj.portrait} alt="message user image"/>
                }
              }
            <div className="direct-chat-text">{obj.message}</div>
          </div>
        </div>
      );
    });

  }
}
export default Chat;
3
  • Já tentou colocar () em obj => ?? Deixando assim (obj) =>
    – NoobSaibot
    Commented 5/11/2017 às 20:58
  • Mesma coisa aconteceu, continuou imprimindo as duas condições na tela Commented 5/11/2017 às 21:01
  • Esse codigo esta dentro do return ( Commented 5/11/2017 às 21:02

1 Resposta 1

1

Não é permitido em sintaxe JSX ter condicões no meio do HTML. Tens de ter {} e a condição lá dentro. Ficaria assim:

const mensagens = this.state.data.map(obj => {
  return (
    <div className="box-body">
      <div className="direct-chat-msg undefined">
        <div className="direct-chat-info clearfix">
          <span className="direct-chat-name pull-left">{obj.userName}</span>
          <span className="direct-chat-timestamp pull-left">{obj.time}</span>
        </div>
          {
            if(obj.displayPortraitLeft == true){
              <img className="direct-chat-img" src={obj.portrait} alt="message user image"/>
            }else{
              <img className="right direct-chat-img" src={obj.portrait} alt="message user image"/>
            }
          }
        <div className="direct-chat-text">{obj.message}</div>
      </div>
    </div>
  );
});
3
  • Coloquei o codigo todo na pergunta, essa parte que tu mandou, fica dentro do return( ); principal do codigo?? Commented 5/11/2017 às 21:20
  • @HenriqueHermes exato. Se quiseres podes partir em modulos mais pequenos, mas o que eu coloquei na resposta é tudo dentro de 1 return.
    – Sergio
    Commented 5/11/2017 às 21:23
  • navegador continua acusando de erro: Syntax error: C:/Users/henri/Desktop/funcionando/my-app/src/chat/Chat.js: Unexpected token (35:4) CODIGO = const mensagens = this.state.data.map(obj => { Commented 5/11/2017 às 21:28

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 .