IF-Else Reactjs Json condition

Question

In the code developed in Reacjs below, it returns from a field containing a "displayPortraitLeft" key with values ranging from true to false, and depending on the value (true/false) obtained, I would like it to behave differently, use another "style in 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>
                 })
             }

With this code, in the browser nothing appears:

But if I take the keys {} [ after (obj => and your callback ] the images appear, I print the IF line, but not the Obdece:

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;

Answer 1

It is not allowed in JSX syntax to have conditions in the middle of HTML. You must have {} and the condition inside. It would look like this:

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>
  );
});