Message.js

import React, {Component} from 'react';
import '../styles/Message.css';

export default class Message extends Component{
    
    constructor(props){
        super(props);
        this.state = {
            id: props.msg.id,
            title: props.msg.title,
            text: props.msg.text,
            status: props.msg.status
        }
        //this will only run on initial creation of the Component, not updates
    }
    
    componentWillUpdate(){
        //React will complain if you try to set state here
        //this.setState({id:23423});
    }
    
    componentDidUpdate(){
        //React will complain if you try to set state here
    }
    
    toggle = (ev) =>{
        let msg = {...this.state};
        msg.status = (msg.status === 'read')?'not-read':'read';
        this.setState({...msg})
        this.props.toggleRead(msg);
    }
    
    render(){
        let label = (this.state.status === 'not-read')?'Mark As Read':'Mark As Unread';
        
        return (
            <div className={ this.props.msg.status + ' message-box' } >
                <h2>{this.props.msg.title}</h2>
                <p>{this.props.msg.text}</p>
                <p><button onClick={this.toggle}>{label}</button></p>
            </div>
        );
    }
}