React js Blog Application Practice Questions with Solutions

Introduction

A React Blog Application is a practical project for learning how multiple React concepts work together. In this chapter, you will create blog posts, display post lists, show individual posts, search articles, filter posts by category, and manage blog data with state. You will also learn how a React application can load blog posts from an API and handle loading and error states. React js Blog Application Practice Questions with Solutions to help you understand the concepts.

1. Create a Basic Blog Application

Problem Statement

Create a simple React Blog Application that displays a blog title and a few sample posts.

React Solution

function BlogApp() {
  const posts = [
    {
      id: 1,
      title: "Learn React Basics",
      content: "React helps you build interactive user interfaces."
    },
    {
      id: 2,
      title: "Understanding JSX",
      content: "JSX allows you to write UI structures inside JavaScript."
    }
  ];

  return (
    <div>
      <h1>My React Blog</h1>

      {posts.map((post) => (
        <article key={post.id}>
          <h2>{post.title}</h2>
          <p>{post.content}</p>
        </article>
      ))}
    </div>
  );
}

export default BlogApp;

Output

My React Blog

Learn React Basics
React helps you build interactive user interfaces.

Understanding JSX
JSX allows you to write UI structures inside JavaScript.

Explanation

The blog posts are stored in an array of objects.

The map() method creates an article for every post.

posts.map((post) => ...)

A stable id is used as the React key.

Concepts Covered

Components
Arrays
Objects
map()
JSX
React keys

2. Create a Reusable Blog Post Card

Problem Statement

Create a reusable PostCard component that receives a blog post through props and displays its title, author, and content.

React Solution

function PostCard({ post }) {
  return (
    <article>
      <h2>{post.title}</h2>
      <p>By {post.author}</p>
      <p>{post.content}</p>
    </article>
  );
}

function BlogApp() {
  const post = {
    title: "React Components",
    author: "Amit",
    content: "Components help divide a React application into reusable parts."
  };

  return (
    <div>
      <h1>My React Blog</h1>

      <PostCard post={post} />
    </div>
  );
}

export default BlogApp;

Output

My React Blog

React Components
By Amit

Components help divide a React application into reusable parts.

Explanation

PostCard is a reusable component.

The post object is passed using props:

&lt;PostCard post={post} />

The component then reads the values from:

function PostCard({ post })

This makes the component reusable for multiple posts.

Concepts Covered

Components
Props
Props destructuring
Reusable UI
Component composition

3. Display Multiple Blog Posts

Problem Statement

Create multiple blog posts and display them using a reusable PostCard component.

React Solution

function PostCard({ post }) {
  return (
    <article>
      <h2>{post.title}</h2>
      <p>Author: {post.author}</p>
      <p>{post.content}</p>
    </article>
  );
}

function BlogApp() {
  const posts = [
    {
      id: 1,
      title: "React State",
      author: "Rahul",
      content: "State allows a component to remember changing information."
    },
    {
      id: 2,
      title: "React Props",
      author: "Priya",
      content: "Props allow components to receive data from their parent."
    },
    {
      id: 3,
      title: "React Hooks",
      author: "Aman",
      content: "Hooks allow function components to use React features."
    }
  ];

  return (
    <div>
      <h1>React Blog</h1>

      {posts.map((post) => (
        <PostCard key={post.id} post={post} />
      ))}
    </div>
  );
}

export default BlogApp;

Output

React Blog

React State
Author: Rahul
State allows a component to remember changing information.

React Props
Author: Priya
Props allow components to receive data from their parent.

React Hooks
Author: Aman
Hooks allow function components to use React features.

Explanation

The PostCard component is used for every item in the posts array.

The key is placed on the component created by map():

<PostCard key={post.id} post={post} />

Keys help React identify list items efficiently.

Concepts Covered

Reusable components
Props
map()
Keys
Component rendering

4. Add New Blog Posts Using useState

Problem Statement

Create a blog application where the user can enter a title and content and add a new post to the list.

React Solution

import { useState } from "react";

function BlogApp() {
  const [title, setTitle] = useState("");
  const [content, setContent] = useState("");

  const [posts, setPosts] = useState([
    {
      id: 1,
      title: "Welcome to My Blog",
      content: "This is my first blog post."
    }
  ]);

  function addPost(e) {
    e.preventDefault();

    if (!title.trim() || !content.trim()) {
      return;
    }

    const newPost = {
      id: crypto.randomUUID(),
      title: title.trim(),
      content: content.trim()
    };

    setPosts((currentPosts) => [
      ...currentPosts,
      newPost
    ]);

    setTitle("");
    setContent("");
  }

  return (
    <div>
      <h1>React Blog</h1>

      <form onSubmit={addPost}>
        <input
          type="text"
          placeholder="Post title"
          value={title}
          onChange={(e) => setTitle(e.target.value)}
        />

        <textarea
          placeholder="Post content"
          value={content}
          onChange={(e) => setContent(e.target.value)}
        />

        <button type="submit">
          Add Post
        </button>
      </form>

      {posts.map((post) => (
        <article key={post.id}>
          <h2>{post.title}</h2>
          <p>{post.content}</p>
        </article>
      ))}
    </div>
  );
}

export default BlogApp;

Output

After entering:

Title: Learning React
Content: React is useful for building modern interfaces.

The blog displays:

Learning React
React is useful for building modern interfaces.

Explanation

The posts are stored in state.

A new array is created when adding a post:

setPosts((currentPosts) => [
  ...currentPosts,
  newPost
]);

The spread operator keeps the existing posts and adds the new post.

Concepts Covered

useState
Controlled inputs
Forms
Immutable state updates
Array spread
crypto.randomUUID()

5. Delete a Blog Post

Problem Statement

Add a Delete button to each blog post and remove the selected post from the list.

React Solution

import { useState } from "react";

function BlogApp() {
  const [posts, setPosts] = useState([
    {
      id: 1,
      title: "React Basics",
      content: "Learn the fundamentals of React."
    },
    {
      id: 2,
      title: "React Hooks",
      content: "Hooks provide useful React features."
    }
  ]);

  function deletePost(id) {
    setPosts((currentPosts) =>
      currentPosts.filter((post) => post.id !== id)
    );
  }

  return (
    <div>
      <h1>React Blog</h1>

      {posts.map((post) => (
        <article key={post.id}>
          <h2>{post.title}</h2>
          <p>{post.content}</p>

          <button onClick={() => deletePost(post.id)}>
            Delete
          </button>
        </article>
      ))}
    </div>
  );
}

export default BlogApp;

Output

Before deletion:

React Basics
Learn the fundamentals of React.
[Delete]

React Hooks
Hooks provide useful React features.
[Delete]

After deleting React Basics:

React Hooks
Hooks provide useful React features.
[Delete]

Explanation

filter() creates a new array without the selected post.

currentPosts.filter((post) => post.id !== id)

This is an immutable way to update the posts array.

Concepts Covered

filter()
State updates
Event handling
Immutable updates
Delete functionality

6. Add Search Functionality to the Blog

Problem Statement

Create a search box that allows users to search blog posts by title.

React Solution

import { useState } from "react";

function BlogApp() {
  const [search, setSearch] = useState("");

  const posts = [
    {
      id: 1,
      title: "React Components",
      content: "Learn about components."
    },
    {
      id: 2,
      title: "JavaScript Basics",
      content: "Learn JavaScript fundamentals."
    },
    {
      id: 3,
      title: "React Hooks",
      content: "Learn how React Hooks work."
    }
  ];

  const filteredPosts = posts.filter((post) =>
    post.title
      .toLowerCase()
      .includes(search.toLowerCase().trim())
  );

  return (
    <div>
      <h1>React Blog</h1>

      <input
        type="text"
        placeholder="Search posts"
        value={search}
        onChange={(e) => setSearch(e.target.value)}
      />

      {filteredPosts.map((post) => (
        <article key={post.id}>
          <h2>{post.title}</h2>
          <p>{post.content}</p>
        </article>
      ))}
    </div>
  );
}

export default BlogApp;

Output

If the user searches:

React

The result can be:

React Components
Learn about components.

React Hooks
Learn how React Hooks work.

Explanation

The search result is derived from posts and search, so it does not need separate state.

const filteredPosts = posts.filter(...)

toLowerCase() makes the search case-insensitive.

Concepts Covered

Search
Controlled input
filter()
includes()
Derived data
Case-insensitive search

7. Filter Blog Posts by Category

Problem Statement

Add categories to blog posts and allow the user to filter posts by category.

React Solution

import { useState } from "react";

function BlogApp() {
  const [category, setCategory] = useState("All");

  const posts = [
    {
      id: 1,
      title: "React State",
      category: "React"
    },
    {
      id: 2,
      title: "JavaScript Arrays",
      category: "JavaScript"
    },
    {
      id: 3,
      title: "React Props",
      category: "React"
    }
  ];

  const filteredPosts =
    category === "All"
      ? posts
      : posts.filter((post) => post.category === category);

  return (
    <div>
      <h1>React Blog</h1>

      <select
        value={category}
        onChange={(e) => setCategory(e.target.value)}
      >
        <option value="All">All</option>
        <option value="React">React</option>
        <option value="JavaScript">JavaScript</option>
      </select>

      {filteredPosts.map((post) => (
        <article key={post.id}>
          <h2>{post.title}</h2>
          <p>Category: {post.category}</p>
        </article>
      ))}
    </div>
  );
}

export default BlogApp;

Output

If React is selected:

React State
Category: React

React Props
Category: React

Explanation

The selected category is stored in state.

When the category is All, every post is displayed.

Otherwise, filter() returns only posts matching the selected category.

Concepts Covered

useState
<select>
Filtering
Conditional logic
Derived data

8. Show an Individual Blog Post

Problem Statement

Create a simple blog application where clicking a post title displays that post as the selected article.

React Solution

import { useState } from "react";

function BlogApp() {
  const [selectedPost, setSelectedPost] = useState(null);

  const posts = [
    {
      id: 1,
      title: "React Components",
      content:
        "React components help divide an application into reusable pieces."
    },
    {
      id: 2,
      title: "React State",
      content:
        "State stores information that can change during the lifetime of a component."
    }
  ];

  return (
    <div>
      <h1>React Blog</h1>

      {selectedPost ? (
        <article>
          <button onClick={() => setSelectedPost(null)}>
            Back to Posts
          </button>

          <h2>{selectedPost.title}</h2>
          <p>{selectedPost.content}</p>
        </article>
      ) : (
        posts.map((post) => (
          <article key={post.id}>
            <h2>
              <button onClick={() => setSelectedPost(post)}>
                {post.title}
              </button>
            </h2>
          </article>
        ))
      )}
    </div>
  );
}

export default BlogApp;

Output

Initially:

React Blog

[React Components]

[React State]

After clicking React Components:

[Back to Posts]

React Components

React components help divide an application
into reusable pieces.

Explanation

selectedPost stores the currently selected article.

Conditional rendering determines whether the application shows:

The post list, or
The selected post.

Concepts Covered

useState
Conditional rendering
Event handling
Selected item state
Dynamic content

9. Fetch Blog Posts from an API

Problem Statement

Create a React component that loads blog posts from an API and displays loading, error, and success states.

React Solution

import { useEffect, useState } from "react";

function BlogApp() {
  const [posts, setPosts] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState("");

  useEffect(() => {
    async function loadPosts() {
      try {
        const response = await fetch(
          "https://example.com/api/posts"
        );

        if (!response.ok) {
          throw new Error("Unable to load blog posts.");
        }

        const data = await response.json();

        setPosts(data);
      } catch (error) {
        setError(error.message);
      } finally {
        setLoading(false);
      }
    }

    loadPosts();
  }, []);

  if (loading) {
    return <p>Loading posts...</p>;
  }

  if (error) {
    return <p>{error}</p>;
  }

  return (
    <div>
      <h1>React Blog</h1>

      {posts.map((post) => (
        <article key={post.id}>
          <h2>{post.title}</h2>
          <p>{post.content}</p>
        </article>
      ))}
    </div>
  );
}

export default BlogApp;

Output

During the request:

Loading posts...

After a successful response:

React Blog

React Components
...

React State
...

If the request fails:

Unable to load blog posts.

Explanation

useEffect is used to synchronize the component with the external API.

The component tracks three important states:

const [posts, setPosts] = useState([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState("");

The response.ok check is important because fetch() does not automatically reject for HTTP error responses such as 404 or 500.

The API URL above is only a placeholder. A real project should use the endpoint and response structure of the backend or blog API being used.

Concepts Covered

useEffect
API integration
fetch()
async/await
Loading state
Error state
JSON data

10. Build a Complete React Blog Application

Problem Statement

Build a practical React Blog Application that includes:

Blog post list
Search
Category filter
Add new post
Delete post
Individual post view
Loading and error concepts
Reusable components

React Solution

import { useState } from "react";

function PostCard({ post, onSelect, onDelete }) {
  return (
    <article>
      <h2>
        <button onClick={() => onSelect(post)}>
          {post.title}
        </button>
      </h2>

      <p>Category: {post.category}</p>
      <p>{post.content}</p>

      <button onClick={() => onDelete(post.id)}>
        Delete
      </button>
    </article>
  );
}

function BlogApp() {
  const [posts, setPosts] = useState([
    {
      id: 1,
      title: "Learn React Components",
      category: "React",
      content:
        "Components make React applications easier to organize."
    },
    {
      id: 2,
      title: "JavaScript Array Methods",
      category: "JavaScript",
      content:
        "Methods such as map, filter, and reduce are useful in React."
    },
    {
      id: 3,
      title: "Understanding React State",
      category: "React",
      content:
        "State allows React components to manage changing information."
    }
  ]);

  const [title, setTitle] = useState("");
  const [content, setContent] = useState("");
  const [category, setCategory] = useState("React");

  const [search, setSearch] = useState("");
  const [filterCategory, setFilterCategory] = useState("All");

  const [selectedPost, setSelectedPost] = useState(null);

  function addPost(e) {
    e.preventDefault();

    if (!title.trim() || !content.trim()) {
      return;
    }

    const newPost = {
      id: crypto.randomUUID(),
      title: title.trim(),
      category,
      content: content.trim()
    };

    setPosts((currentPosts) => [
      newPost,
      ...currentPosts
    ]);

    setTitle("");
    setContent("");
  }

  function deletePost(id) {
    setPosts((currentPosts) =>
      currentPosts.filter((post) => post.id !== id)
    );

    if (selectedPost?.id === id) {
      setSelectedPost(null);
    }
  }

  const filteredPosts = posts.filter((post) => {
    const matchesSearch = post.title
      .toLowerCase()
      .includes(search.toLowerCase().trim());

    const matchesCategory =
      filterCategory === "All" ||
      post.category === filterCategory;

    return matchesSearch && matchesCategory;
  });

  if (selectedPost) {
    return (
      <div>
        <button onClick={() => setSelectedPost(null)}>
          Back to Posts
        </button>

        <h1>{selectedPost.title}</h1>

        <p>
          Category: {selectedPost.category}
        </p>

        <p>{selectedPost.content}</p>

        <button
          onClick={() => deletePost(selectedPost.id)}
        >
          Delete Post
        </button>
      </div>
    );
  }

  return (
    <div>
      <h1>My React Blog</h1>

      <form onSubmit={addPost}>
        <input
          type="text"
          placeholder="Post title"
          value={title}
          onChange={(e) => setTitle(e.target.value)}
        />

        <textarea
          placeholder="Post content"
          value={content}
          onChange={(e) => setContent(e.target.value)}
        />

        <select
          value={category}
          onChange={(e) => setCategory(e.target.value)}
        >
          <option value="React">React</option>
          <option value="JavaScript">JavaScript</option>
        </select>

        <button type="submit">
          Add Post
        </button>
      </form>

      <hr />

      <input
        type="text"
        placeholder="Search posts"
        value={search}
        onChange={(e) => setSearch(e.target.value)}
      />

      <select
        value={filterCategory}
        onChange={(e) =>
          setFilterCategory(e.target.value)
        }
      >
        <option value="All">All Categories</option>
        <option value="React">React</option>
        <option value="JavaScript">JavaScript</option>
      </select>

      <p>
        Showing {filteredPosts.length} post(s)
      </p>

      {filteredPosts.length === 0 ? (
        <p>No posts found.</p>
      ) : (
        filteredPosts.map((post) => (
          <PostCard
            key={post.id}
            post={post}
            onSelect={setSelectedPost}
            onDelete={deletePost}
          />
        ))
      )}
    </div>
  );
}

export default BlogApp;

Output

The application can contain:

My React Blog

[ Post title                     ]

[ Post content                   ]

[ React ▼ ] [ Add Post ]

[ Search posts                   ]

[ All Categories ▼ ]

Showing 3 post(s)

Learn React Components
Category: React
Components make React applications easier to organize.
[Delete]

JavaScript Array Methods
Category: JavaScript
Methods such as map, filter, and reduce are useful in React.
[Delete]

Understanding React State
Category: React
State allows React components to manage changing information.
[Delete]

After clicking a post:

[Back to Posts]

Learn React Components

Category: React

Components make React applications easier to organize.

[Delete Post]

Explanation

This project combines several React concepts into one practical application.

Step 1: Store Blog Posts

The posts are stored in an array inside state:

const [posts, setPosts] = useState([...]);

Step 2: Add Posts

A new post is added without directly modifying the existing array:

setPosts((currentPosts) => [
  newPost,
  ...currentPosts
]);

Step 3: Delete Posts

filter() removes the selected post:

setPosts((currentPosts) =>
  currentPosts.filter((post) => post.id !== id)
);

Step 4: Search Posts

The search result is derived from the current posts:

const matchesSearch = post.title
  .toLowerCase()
  .includes(search.toLowerCase().trim());

Step 5: Filter Categories

The application combines search and category conditions:

return matchesSearch && matchesCategory;

Both conditions must be true for the post to appear.

Step 6: Open an Individual Post

The selected post is stored in:

const [selectedPost, setSelectedPost] = useState(null);

Conditional rendering then switches between the post list and individual article.

Step 7: Reuse PostCard

The PostCard component receives the post and event handlers through props.

This keeps the main component easier to organize and makes the post UI reusable.

Step 8: Extend the Project with an API

For a real blog application, posts can be loaded and saved through a backend API instead of keeping them only in browser memory.

A production application can additionally include:

React Router
User authentication
Comments
Pagination
Image uploads
Rich text editing
Backend database
Server-side validation
API loading and error handling
Admin dashboard

Concepts Covered

React components
Props
useState
Forms
Controlled inputs
map()
filter()
Search
Category filtering
Conditional rendering
Event handling
Immutable state updates
Reusable components
CRUD-style operations
API integration concepts

Key Takeaways

A React Blog Application is an excellent project for combining multiple React concepts.
Blog posts can be represented as an array of objects.
map() can render a list of blog posts.
Stable unique IDs should be used as keys for list items.
Props can make a PostCard component reusable.
useState can manage posts, forms, search, filters, and selected posts.
filter() can be used for deleting and filtering blog posts.
Search and category results are usually derived from the existing post data.
Conditional rendering can switch between a post list and an individual article.
fetch() and useEffect can be used to load posts from an API.
Loading and error states should be handled when working with external APIs.
A React-only application does not permanently store blog posts in a database.
A production blog normally requires a backend, database, authentication, validation, and appropriate authorization.

FAQs

1. What is a React Blog Application?

A React Blog Application is a web application built with React where users can display, search, filter, create, update, or delete blog posts.

2. Which React concepts are used in a Blog Application?

Common concepts include components, props, useState, forms, event handling, map(), filter(), conditional rendering, and API integration.

3. How can I display multiple blog posts in React?

Store posts in an array and use the map() method to create a component for each post.

posts.map((post) => (
  <PostCard key={post.id} post={post} />
))

4. How do I add a new blog post in React?

You can create a controlled form, store the input values in state, create a new post object, and add it to the posts array using a state updater.

5. How can I search blog posts in React?

Use a controlled input and filter() to create a derived list of posts that match the search text.

6. Can React Blog Application use an API?

Yes. A React Blog Application can use fetch() or another HTTP client to communicate with a backend API and load or modify blog data.

7. Does a React Blog Application need a database?

A simple practice application can use local state or local data. A real blog that needs persistent posts generally requires a backend and database.

Written by Shubhranshu Shekhar, who has trained 20000+ students in coding.

Rishabh Kumar

Introduction

1. Create a Basic Blog Application

2. Create a Reusable Blog Post Card

3. Display Multiple Blog Posts

4. Add New Blog Posts Using useState

5. Delete a Blog Post

6. Add Search Functionality to the Blog

7. Filter Blog Posts by Category

8. Show an Individual Blog Post

9. Fetch Blog Posts from an API

10. Build a Complete React Blog Application

Step 1: Store Blog Posts

Step 2: Add Posts

Step 3: Delete Posts

Step 4: Search Posts

Step 5: Filter Categories

Step 6: Open an Individual Post

Step 7: Reuse PostCard

Step 8: Extend the Project with an API

Key Takeaways

FAQs

1. What is a React Blog Application?

2. Which React concepts are used in a Blog Application?

3. How can I display multiple blog posts in React?

4. How do I add a new blog post in React?

5. How can I search blog posts in React?

6. Can React Blog Application use an API?

7. Does a React Blog Application need a database?

Related Posts