[Solved]-Display a <li> in reverse order in React project using inline CSS-Reactjs

var styles = {
  flex: 1,
  flexDirection: 'column-reverse',
  color: "#3895C4",
  fontSize: 25,
  fontFamily: "Courier New",
  background: "#eee",
  padding: "20px",
  margin: "20px",
  listStyleType: "none",
  transition: "opacity .25s ease-in";
}

<ul style={styles}> // this should be a ul, and not li
  { /* Render the list of messages */
    this.state.messages.map((message) => 
        <li key={message.id}>{message.text}</li> 
    )
  }
</ul>