Issues with React - Rendering with Ternary

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.

Hi!
One thing that might be broken is that in your first map you don’t return anything, so

this.props.chats.map(chat => {
   return chat.users.includes(this.props.currentChat) ? (
      <div key={Math.random()}>...

might help. The second map should be fine as you do an inline return…

1 Like