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

|

21 Discussions

|

  • andrewkoster
     + 0 comments

    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.

  • poonamdeorasurp1
     + 0 comments

    Here is a guide on How to add VSCode custom snippet for javascript and react native

  • renzotrigoso
     + 1 comment

    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.

  • Karthik_ravi_21
     + 0 comments
    function Home() {
  const [title,setTitle] = useState("");
  const [desc,setDesc] = useState("");
  const [error,setError] = useState("");
  const [blog,setBlog] = useState([]);

  const addBlog = ()=> {
    if (title.trim() && desc.trim()){
      setBlog(prev => [...prev, {title,desc}]);
      setTitle("");
      setDesc("");
    } else {
      setError("All fields are required");
    }
  }
  return (
    <div className="text-center ma-20">
      <div className="mb-20">
        <Input title={title} desc={desc} setTitle={setTitle} setDesc={setDesc}/>
        {error && 
        <p>{error}</p>}
        <button onClick={addBlog} data-testid="create-button" className="mt-10">
          Create Post
        </button>
      </div>
      <div className="posts-section">
        <PostDisplay blog={blog} setBlog={setBlog}/>
      </div>
    </div>
  );
	`function Input({title,setTitle,desc,setDesc}) {
  return (
    <div className="layout-column justify-content-center align-items-center">
      <input className="w-100" type="text" placeholder="Enter Title" value={title} onChange={(e)=> setTitle(e.target.value)} data-testid="title-input" />
      <textarea className="mt-10 w-100" placeholder="Enter Description" value={desc} onChange={(e)=> setDesc(e.target.value)} data-testid="description-input" />
    </div>
  );
}

export default Input;`

    function PostDisplay({ blog,setBlog }) {

    const deleteBlog = (indexToDelete) => { setBlog(blog.filter((_,index) => index !== indexToDelete)) } return ( {blog.map((item, index) => (

    {item.title}

    {item.desc}

    deleteBlog(index)}>Delete ))} ); }

    export default PostDisplay;

    }

export default Home;