How To Get And Display All Child List From Firebase React

I'm trying to do something like 'blog post' by getting user post, push it onto firebase and then get it back to display on element. Here is a part of my code constructor(props){

Solution 1:

I get the correct result by doing like this

constructor(props){
super(props);
this.state = {
        title: [],
        story: [],
        date: [],
        post: '',
    };
};}

componentDidMount(){
const rootRef = firebase.database().ref();
const post = rootRef.child('post').orderByKey();

     post.once('value', snap => {
       snap.forEach(child => {
           this.setState({
               date: this.state.date.concat([child.key]),
               title: this.state.title.concat([child.val().title]),
               story: this.state.story.concat([child.val().story])
           });

           const postList = this.state.date.map((dataList, index) =>
                <p>
                    {dataList}
                    <br />
                    {this.state.title[index]}
                    <br />
                    {this.state.story[index]}
                    <hr />
                </p>

            );

            this.setState({
                post: postList
            });
       });
   }); }

on render()

<div className="diary">

  <ul>{this.state.post}</ul>

</div>

the result.