title: How to make chat like UI with chat bubbles in React JS
body: <p>I have some JSON data in <code>dummyData</code>. I am not sure how can I place the chat bubbles on left and right according to the <code>direction</code>. I am using Material UI and context API. Image for the reference. I don't want to use any library other than material UI.</p>
  
  <p><a href="https://i.stack.imgur.com/XK4RX.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XK4RX.png" alt="enter image description here"></a></p>
  
  <p>Currently, every chat bubble is positioned to the left. How to position bubbles according to the <code>direction</code>. Code so far (<a href="https://codesandbox.io/s/youthful-feather-47rbt" rel="nofollow noreferrer">CodeSandbox</a>):</p>
  
  <pre><code>    import React from 'react';
  import makeStyles from '@material-ui/core/styles/makeStyles';
  
  const useStyles = makeStyles(theme =&gt; ({
      container: {
          bottom: 0,
          position: 'fixed'
      },
      bubbleContainer: {
          width: '100%'
      },
      bubble: {
          border: '0.5px solid black',
          borderRadius: '10px',
          margin: '5px',
          padding: '10px',
          display: 'inline-block'
      }
  }));
  
  const ChatLayout = () =&gt; {
      const classes = useStyles();
      const dummyData = [
          {
              message: '1: This should be in left',
              direction: 'left'
          },
          {
              message: '2: This should be in right',
              direction: 'right'
          },
          {
              message: '3: This should be in left again',
              direction: 'left'
          }
      ];
  
      const chatBubbles = dummyData.map((obj, i = 0) =&gt; (
          &lt;div className={classes.bubbleContainer}&gt;
              &lt;div key={i++} className={classes.bubble}&gt;
                  &lt;div className={classes.button}&gt;{obj.message}&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      ));
      return &lt;div className={classes.container}&gt;{chatBubbles}&lt;/div&gt;;
  };
  
  export default ChatLayout;
  </code></pre>