React - Add effect every time a new element is being added w/ input field

React - Add an effect every time to new message that is being added to the other messages.

I have an array of objects that contains each message that is being sent

Here are at the beginning of the code there is an input field then there is also another function that displays all the messages
Object.keys to map all the messages
I wonder if I can use onTransitionStart and onTransitionEnd callbacks

`<input type="text" className="color-code" id="color" value={this.state.input} onChange={this.handleChange.bind(this)}/>`


  Object.keys(, i) => {
  return ( 
  <div className="clear"></div>
    <div className="from-me">
      <p>{[key].text}<span className="time-right-a">{[key].time}</span></p>
    <div className="from-them">
      <p>{[key].text}<span className="time-right">{[key].time}</span></p>