dev.to

Coding Challenge Practice - Question 5

Today's question Create a React application that allows users to create, display and delete blog posts. Solution The first step is to evaluate the boilerplate provided. There are 3 boilerplate files: Home.js import React from "react"; import Input from "./Input"; import PostDisplay from "./PostDisplay"; function Home() { return ( Create Post ); } export default Home; Input.js import React, { useState } from "react"; function Input() { return ( ); } export default Input; PostDisplay.js import React from "react"; function PostDisplay() { return ( {"Title"} {"Description"} Delete ); } export default PostDisplay; The Home component(file) is provided as the parent component, which manages the state of the application. So, variable states for all blog posts, and a single new blog post will be created. The input component is responsible for creating new blog posts, therefore, the variable states for new blogs will be passed into it after it has been created in the Home component. Then, the PostDisplay component, which handles showing all blog posts, will have the state for all blog posts passed into it.

May 10, 2025 - 00:14
 0
Coding Challenge Practice - Question 5

Today's question

Create a React application that allows users to create, display and delete blog posts.

Solution

The first step is to evaluate the boilerplate provided. There are 3 boilerplate files:

Home.js

import React from "react";
import Input from "./Input";
import PostDisplay from "./PostDisplay";

function Home() {
  return (
    

      

        
        
      

      

        
      

    

  );
}

export default Home;

Input.js

import React, { useState } from "react";

function Input() {
  return (