We use cookies to ensure you have the best browsing experience on our website. Please read our cookie policy for more information about how we use cookies.
  1. Prepare
  2. React
  3. Data Handling
  4. Blog Post
  5. Discussions

Blog Post

Sort by

recency

|

27 Discussions

|

  • ngdana1
     + 0 comments

    If you do not modify the component setup, where the Input and PostDisplay remain a separate file, I would move the state into a reducer. But note there is one problem where the test will need only one PostDisplay container div, so that I had to move up, or else you can find a way to map through in the PostDisplay the number of posts instead of in Home

    I'm sure there are many other ways to do this, but I tried to stick with the JSX setup as it was currently.

  • susilakashraj
     + 0 comments

    Need to move the to home component

    Home
import React, { useState } from "react";
import Input from "./Input";
import PostDisplay from "./PostDisplay";


function Home() {
  const [blogData, setBlogData] = useState([])
  const [title, setTitle] = useState("")
  const [description, setDescription] = useState("")
  console.log("blogData", blogData)

  const saveBlog = () => {
    let num = Math.random();
    if (title?.trim() && description?.trim()) {
      setBlogData((prev) => [...prev, { id: num, title, description }])
      setTitle("")
      setDescription("")
    }
  }

   const handleDelete = (id) => {
    const filtedData = blogData?.filter((blog) => blog?.id !== id)
    setBlogData(filtedData)
  }

  return (
    <div className="text-center ma-20">
      <div className="mb-20">
        <Input title={title} description={description} setTitle={setTitle} setDescription={setDescription} />
        <button data-testid="create-button" className="mt-10" onClick={saveBlog}>
          Create Post
        </button>
      </div>
       <div className="posts-section">
        <div data-testid="posts-container" className="flex wrap gap-10">
        <PostDisplay blogData={blogData} handleDelete={handleDelete} />
        </div>
      </div>
    </div>
  );
}
export default Home

Input Component:
import React, { useState } from "react";

function Input({title, description, setTitle, setDescription}) {

  const handleChange = (e) => {
   if(e.target.name === "title"){
    setTitle(e.target.value)
   }else{
    setDescription(e.target.value)
   }

  }

  return (
    <div className="layout-column justify-content-center align-items-center">
      <input className="w-100" type="text" name="title" placeholder="Enter Title" value={title} onChange={handleChange} data-testid="title-input" />
      <textarea className="mt-10 w-100" name="description" placeholder="Enter Description" value={description} onChange={handleChange} data-testid="description-input" />
    </div>
  );
}

export default Input;

Post Display Component:
import React from "react";

function PostDisplay({ blogData, handleDelete }) {

  return (
    <>
      {blogData?.length !== 0 && blogData?.map((blog) => {
        return <div className="post-box" key={blog?.id}>
          <h3>{blog?.title}</h3>
          <p>{blog?.description}</p>
          <button onClick={() => { handleDelete(blog?.id) }}>Delete</button>
        </div>
      })}
    </>
  );
}

export default PostDisplay;

;

  • thearistle
     + 0 comments

    This looks like a great little project for practicing React state management and component rendering! I like that it focuses on simple CRUD operations, which are perfect for learning the basics. Clearing the inputs after creating a post is a nice touch for UX too. If you’re new to React, this is a perfect challenge to get hands-on, give it a try and join the fun of building and managing your own mini blog app!

  • sankarsingampal1
     + 0 comments
    import React,{useState} from "react";
import Input from "./Input";
import PostDisplay from "./PostDisplay";

function Home() {
  const [blogTitle, setBlogTitle] = useState("");
  const [blogText, setBlogText]= useState("");
  const [postes, setPostes]= useState([]);
  const [countId, setCountId] = useState(1);

  const handleCreate=()=>{
    if(!blogTitle || !blogText) return;
    const newPost={id:countId,title:blogTitle,text:blogText}
    setPostes([...postes, newPost]);
   setBlogTitle("");
   setBlogText("");
   setCountId(countId +1);
  }

  const handleDelete=(id)=>{
    setPostes((prev)=>prev.filter((post)=>post.id !== id));
  }
  return (
    <div className="text-center ma-20">
      <div className="mb-20">
        <Input blogTitle={blogTitle} blogText={blogText} setBlogTitle={setBlogTitle} setBlogText={setBlogText}/>
        <button data-testid="create-button" className="mt-10" onClick={handleCreate}>
          Create Post
        </button>
      </div>
      <div className="posts-section">
        <PostDisplay postes={postes} handleDelete={handleDelete}/>
      </div>
    </div>
  );
}

export default Home;

  • ramosinfo1
     + 1 comment

    All time I entrie in this chalange give error. I tried in Chrome, Edge and Brave.