Hello World, Today I am going to create a dynamic single page application with reactJs. This tutorial is an extended version of the Previous Tutorial. Please read the previous tutorial to understand this tutorial. In the previous tutorial, we have created the static single page application. In this tutorial, we will create a dynamic application. We will use JSON Placeholder to fetch the fake data and show that data in our application.

Fetch post data from JSON placeholder

Add the following code in Post.js file before the render method.

constructor(){
        super();
        this.state={
            posts:[],
            loading:true
        }
    }
    componentDidMount(){
        fetch('https://jsonplaceholder.typicode.com/posts')
        .then(res=>res.json())
        .then(result=>this.setState({
            posts:result,
            loading:false
        }));
    }

In the above code, we have applied the fetch api to get the data from json placeholder server.

The componentDidUpdate method will work after all our dom in rendered and our state is updated with data. We are also using the load object. It helps us to show loading while our data is coming from the server.

Show data from JSON placeholder

Replace the render method code with Post.js file.

const posts=this.state.posts.map(
            post=><PostList key={post.id} post={post} />
        )
        if(this.state.loading){
            return(
                <div className="container mt-4">
                    Loading...
                </div>
            )
        }else{
            return(
                <div className="container mt-4">
                    {posts}
                </div>
            )
        }

Add the following code after the Post Class in Post.js file.

// Single Post Data
class PostList extends React.Component{
    render(){
        const post=this.props.post;
        return(
            <div className="card mb-3">
                <div className="card-header">{post.title}</div>
                <div className="card-body">
                    {post.body}
                </div>
            </div>
        )
    }
}

Full source code of Post.js file

class Post extends React.Component{
    constructor(){
        super();
        this.state={
            posts:[],
            loading:true
        }
    }
    componentDidMount(){
        fetch('https://jsonplaceholder.typicode.com/posts')
        .then(res=>res.json())
        .then(result=>this.setState({
            posts:result,
            loading:false
        }));
    }
    render(){
        const posts=this.state.posts.map(
            post=><PostList key={post.id} post={post} />
        )
        if(this.state.loading){
            return(
                <div className="container mt-4">
                    Loading...
                </div>
            )
        }else{
            return(
                <div className="container mt-4">
                    {posts}
                </div>
            )
        } 
    }
}

// Single Post Data
class PostList extends React.Component{
    render(){
        const post=this.props.post;
        return(
            <div className="card mb-3">
                <div className="card-header">{post.title}</div>
                <div className="card-body">
                    {post.body}
                </div>
            </div>
        )
    }
}