title: how can i render an array using different styling according to a specific property in this case message.senderEmail
body: <pre><code>   function AlignFeature(){
  const [allMessages, setAllMessages] = useState([]);
  useEffect(()=&gt;{       
  MessageService.getAllMessages().then(res=&gt;{
  setAllMessages(res.data);
  });  
  
  
      
  }, []);
  
    
     
          return (
              &lt;Container&gt;
                   &lt;Row&gt;
                        &lt;Col md={{ span: 6, offset: 0}}&gt;
                          &lt;div&gt; 
                              &lt;div&gt;&lt;Button color='warning' 
                           onclick={MessageService.deleteChat}&gt; 
                           delete chat&lt;/Button&gt;&lt;/div&gt; 
                            &lt;div className='chat'&gt;
                            &lt;div className='sentMes'&gt;{
                                allMessages.map(message =&gt; 
                                  &lt;div key = {message.id}
                                   className='sentMessages'&gt;
                                      
                                      &lt;p 
                                      
                                      &gt; {message.message} &lt;/p&gt;
                                       
                                  &lt;/div&gt;
                                   )} 
                                   
                             &lt;/div&gt;
                             
  
                          &lt;/div&gt;
                             &lt;div style={{position:'static'}}&gt;
                                 &lt;MessageForm /&gt; 
                          &lt;/div&gt;
                          &lt;/div&gt; 
  
      &lt;/Col&gt;
      &lt;Col  md={{ span: 3, offset: 0}}&gt; &lt;UploadFiles /&gt;&lt;/Col&gt;
    &lt;/Row&gt;
              &lt;/Container&gt;
          );
      }
  export default AlignFeature;
  </code></pre>
  <p>properties of message are(id, message, receiverEmail, senderEmail)
  after the map function i want to render message.message either left or right by checking if message.receiverEmail compares to an email stored in localStorage. if message.receiverEmail == localStorage.getItem('email') display right else display left</p>