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

|

24 Discussions

|

  • 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;

  • andrewkoster
     + 1 comment

    This challenge is broken. There are hidden requirements.

    As "renzotrigoso" said:

    This exercise is broken because the tests are checking for a container that is repeated multiple times.

    To fix: move the outter divs of the postbox component into the home component.

    The test looks for the posts-container second child, but if you don't alter the child component, you will end up repeating the container multiple times, which is not taken into account within the tests.

  • zaynmalric
     + 0 comments

    If you're ever in need of quick and professional lock assistance, haarlem slotenmaker is the go-to service. Their fast response and expert solutions make them a reliable choice for anyone dealing with lockouts or needing secure installations in Haarlem.