Trying to render some JSX when some conditions are met and all. Could someone maybe point out an issue.
import React from 'react';
class ChatView extends React.Component {
constructor(props) {
super();
this.state = {
chat: []
};
}
componentDidMount() {}
render() {
return (
<div style={{ background: 'white', color: 'black' }}>
<div
className="bg-secondary"
style={{
padding: '1rem',
minWidth: 'calc(100vw - 120px)',
textAlign: 'center'
}}
>
<p>Your conversation with: {this.props.currentChat}</p>
</div>
<div
style={{
height: '100vh'
}}
>
{this.props.chats
? this.props.chats.map(chat => {
chat.users.includes(this.props.currentChat) ? (
<div key={Math.random()}>
<h1>Hello</h1>
{chat.chat.map(msg => (
<div key={Math.random()}>
<h1>{msg.sender}</h1>
</div>
))}
</div>
) : (
<div>
<h1>NO CHAT</h1>
</div>
);
})
: console.log('NO PROPS')}
</div>
</div>
);
}
}
export default ChatView;
I have done a console.log()
everywhere where I needed to. To check if the data existed there nad it did.