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

|

18 Discussions

|

  • renzotrigoso
     + 0 comments

    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;

  • j_n_haynes2008
     + 1 comment

    Going through the problem, I meet every requirement. The test only shows me meeting 2 of 6 reqs (empty inputs at start, clear inputs after submission). Any suggestions on how to figure out why the test isn't approving me?

  • chao_tzu5
     + 0 comments

    The instructions for these should really encourage also reading the App.test.js to know what the tests are expecting

  • chao_tzu5
     + 0 comments

    The instructions for these should really encourage also reading the App.test.js to know what the tests are expecting