Quick React.js Comment List with editable comments

gistfile1.txt

class CommentView extends React.Component {
    constructor(props) {
        super(props);
    }
    
    render() {
        return (
        	  <div className="comment-view">
                <p className="comment-view-body">
                    {this.props.message}
                </p>
                <div className="comment-view-controls">
                    <ul>
                        <li 
                          onClick={this.props.editEventHandler}
                        >
                            Edit
                        </li>
                        <li
                          onClick={this.props.deleteEventHandler}
                        >
                            Delete
                        </li>
                    </ul>
                </div>
                <div className="comment-view-details">
                    <span>{this.props.author}</span>
                    <span>{this.props.date}</span>
                </div>
           </div>
    		);
    }
}; 

class CommentForm extends React.Component {
    constructor(props) {
        super(props);
        this.state = {'message' : props.message};
    }
    
    submitHandler = (event) => {
    		event.preventDefault();
        this.props.updateEventHandler(this.state.message);
    };
    
    handleChange = (event) => this.setState({'message' : event.target.value});
    
    render() {
        return (
            <form className="comment-form" onSubmit={this.submitHandler}>
                <textarea 
                    value={this.state.message} 
                    onChange={this.handleChange} 
                /><br />
                <button>Submit</button>
            </form>
        );
    }
}

class Comment extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            'editable' : false,
            'updated'  : false,
            'comment'  : props.comment || null
        };
    }
    
    makeCommentEditable = () => {
        this.setState((prev) => {
            prev.editable = true;
        });
    };
    
    updateComment = (newMessage) => {
    		this.setState((prev) => {
            let newState = prev;
            newState.comment.message = newMessage;
            newState.editable = false; 
            return newState;
        });
    };
    
    deleteComment = () => {
        this.setState((prev) => {
            let newState = prev;
            newState.comment = null;
            return newState;
        });
    };
    
    render() {
        if(this.state.comment !== null) {
            if(!this.state.editable) {
                return (
            		    <CommentView 
                        {...this.state.comment} 
                        editEventHandler = {this.makeCommentEditable}
                        deleteEventHandler = {this.deleteComment}
                    />
            		);
        		} else {
        	 			return (
          					<CommentForm 
                        {...this.state.comment} 
                        updateEventHandler = {this.updateComment}
                    />
            		);
        		}
        } else {
            return null;
        }
    }
}

class CommentList extends React.Component {
		constructor(props) {
    		super(props);
    }
    
    render() {
        return (
            <div>
              {this.props.commentList.map(comment => <Comment comment={comment} />)}
            </div>
        );
    }
}

let commentList = [{
		'message' : "This is a very long and superofulous sentence, which i am using to test wether a word break will occur where i expect it to",
    'author'  : "Emile Keith",
    'date'    : "December 1, 2017"
},{
		'message' : "This is a very long and superofulous sentence, which i am using to test wether a word break will occur where i expect it to",
    'author'  : "Emile Keith",
    'date'    : "December 1, 2017"
},{
		'message' : "This is a very long and superofulous sentence, which i am using to test wether a word break will occur where i expect it to",
    'author'  : "Emile Keith",
    'date'    : "December 1, 2017"
},{
		'message' : "This is a very long and superofulous sentence, which i am using to test wether a word break will occur where i expect it to",
    'author'  : "Emile Keith",
    'date'    : "December 1, 2017"
},{
		'message' : "This is a very long and superofulous sentence, which i am using to test wether a word break will occur where i expect it to",
    'author'  : "Emile Keith",
    'date'    : "December 1, 2017"
}];