How can I display the newly added item on top of the previous item?

Question

How can I display the newly added item on top of the previous item?

<div className="App">
      <h2>{this.state.title}</h2>
      <form ref="myForm" className="myForm">
        <input type="text" ref="input" placeholder="your name" className="formField" />
        <button onClick={(e)=>this.fSubmit(e)} className="myButton">submit </button>
      </form>
      <pre>
      {datas.map((data, i) =>
          <li reverse key={i} className="myList">
            {data.input}
            <button onClick={()=>this.fRemove(i)} className="myListButton">remove </button>
            <button onClick={()=>this.fEdit(i)} className="myListButton">edit </button>
          </li>
      )}
    </pre>
    </div>

Answer 1

Just change this code

 <pre>
      {datas.map((data, i) =>
          <li reverse key={i} className="myList">
            {data.input}
            <button onClick={()=>this.fRemove(i)} className="myListButton">remove </button>
            <button onClick={()=>this.fEdit(i)} className="myListButton">edit </button>
          </li>
      )}
    </pre>

To this

 <pre className="reverse-list">
      {datas.map((data, i) =>
          <li key={i} className="myList">
            {data.input}
            <button onClick={()=>this.fRemove(i)} className="myListButton">remove </button>
            <button onClick={()=>this.fEdit(i)} className="myListButton">edit </button>
          </li>
      )}
    </pre>

CSS

.reverse-list{
  display:flex;
  flex-direction: column-reverse;
}

Note: reverse property only works on Ordered-list ol tag and the reversed attribute of the ol tag is not supported in Edge prior version 79.