how can i render an array using different styling according to a specific property in this case message.senderEmail

Question

   function AlignFeature(){
const [allMessages, setAllMessages] = useState([]);
useEffect(()=>{       
MessageService.getAllMessages().then(res=>{
setAllMessages(res.data);
});  


    
}, []);

  
   
        return (
            <Container>
                 <Row>
                      <Col md={{ span: 6, offset: 0}}>
                        <div> 
                            <div><Button color='warning' 
                         onclick={MessageService.deleteChat}> 
                         delete chat</Button></div> 
                          <div className='chat'>
                          <div className='sentMes'>{
                              allMessages.map(message => 
                                <div key = {message.id}
                                 className='sentMessages'>
                                    
                                    <p 
                                    
                                    > {message.message} </p>
                                     
                                </div>
                                 )} 
                                 
                           </div>
                           

                        </div>
                           <div style={{position:'static'}}>
                               <MessageForm /> 
                        </div>
                        </div> 

    </Col>
    <Col  md={{ span: 3, offset: 0}}> <UploadFiles /></Col>
  </Row>
            </Container>
        );
    }
export default AlignFeature;

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

score 0 · Answer 1 · answered Oct 13 '21 at 03:17

There are two ways of going about this problem my sources are Composition vs Inheritance and this question about updating parent state in react. This is also a good resource for learning about state.

From your question you are wanting to compare against data gained later and update the UI of a previously generated component based on that data. With react everything is based upon updating the state which updates the presented information hooks just provide a different way of doing this.

An example that fits into your current way of doing things (hooks) would be to pass an update function that will update the parent state to a lower level component.


function AlignFeature() {
    const [allMessages, setAllMessages, localMessages, setLocalMessages] = useState([]);
    useEffect(() => {
        MessageService.getAllMessages().then(res => {
            setAllMessages(res.data);
        });



    }, []);

    return (
        <Container>
            <Row>
                <Col md={{ span: 6, offset: 0 }}>
                    <div>
                        <div><Button color='warning'
                            onclick={MessageService.deleteChat}>
                            delete chat</Button></div>
                        <div className='chat'>
                            <div className='sentMes'>{
                                allMessages.map(message => {
                                    if (localMessages.some(m => message.receiverEmail == m.receiverEmail)) {
                                        // when email matches local
                                        <div key={message.id} className='sentMessages'>

                                            <p style={{ float: 'right' }}> {message.message} </p>

                                        </div>;
                                    } else {
                                        // when email does not match local
                                        <div key={message.id} className='sentMessages'>

                                            <p> {message.message} </p>

                                        </div>
                                    }
                                }
                                )}

                            </div>


                        </div>
                        <div style={{ position: 'static' }}>
                            <MessageForm />
                        </div>
                    </div>

                </Col>
                <Col md={{ span: 3, offset: 0 }}> <UploadFiles updateLocalMessages={(lMessages) => setLocalMessages(lMessages)} /></Col>
            </Row>
        </Container>
    );
}
export default AlignFeature;

<UploadFiles/> will need to assign the local emails or a list of email addresses using the passed in method which needs to be defined.

Note: It may be a good idea to consider case comparisons when comparing email addresses by converting them to both lower or upper case to ensure they match if that fits your use case.

how can i render an array using different styling according to a specific property in this case message.senderEmail

1 Answers1