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

|

26 Discussions

|

  • 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
     + 0 comments

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

  • Sid_Tutai95
     + 0 comments

    Easy solution just using 3 state variables, but surely can be optomized a lot.

    Below is the code:

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

    function Home() { const [title, setTitle] = useState(""); const [description, setDescription] = useState(""); const [posts, setPosts] = useState([]);

    const handlePost = () => { if (title !== "" && description !== "") { const id = posts.length; setPosts([...posts, { id: id, title: title, description: description }]); setTitle(""); setDescription(""); } }

    const handleDeletePost = (id) => { const updatedPosts = posts.filter((item) => item.id !== id); setPosts([...updatedPosts]); }

    return ( Create Post ); }

    export default Home;