Condition IF-Else ReactJS Json

In the code developed in ReacJS below, it returns a field containing a "displayPortraitLeft" key with values ranging from true to false, and depending on the value (true / false) obtained, would like it to behave differently, 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, nothing appears in the browser:

ButifItakeoutthekeys{}[apos(obj=>andyourcallback]theimagesappear,printthelineofIFcode,butdonotobdeceit:

UPDATE:./src/chat/Chat.jsSyntaxerror:C:/Users/henri/Desktop/function/my-app/src/chat/Chat.js:Unexpectedtoken(43:16)

importReact,{Component}from'react';import'./Chat.css';classChatextendsComponent{constructor(props){super(props);this.state={data:[]}}componentDidMount(){letURL='urldemessages'fetch(URL).then(function(response){letdata=response.json()returndata;}).then((json)=>{console.log('VetorJSON:',json)this.setState({data:json});}).catch(function(ex){console.log('parsingfailed',ex)})}handleClick(){console.log('textoinseridopelousuário');}render(){constmensagens=this.state.data.map(obj=>{return(<divclassName="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;