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:
Mas se eu tirar as chaves {} [ apos (obj => e sua callback ] aparece as imagens, imprimi a linha de codigo IF, mas nao a 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;
()
emobj =>
?? Deixando assim(obj) =>