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

|

11 Discussions

|

  • jotasenator
     + 0 comments

    I am seeing it ok but is not working, do i need to do something with the test-id as well

    ` Home

    import React from "react"; import Input from "./Input"; import PostDisplay from "./PostDisplay";

    function Home() { const [formData, setFormData] = React.useState({ title: '', description: '' });

    const [posts, setPosts] = React.useState([]);

    const handleStateChange = (updatedData) => { setFormData(prevState => ({ ...prevState, ...updatedData, })) }

    const {title, description} = formData

    const validData = () => !!title && !!description;

    const handleCreatePost = () => { if (validData()) { setPosts([...posts, formData]) setFormData({ title: '', description: '' }) } }

    const handleDeletePost = (index) => { setPosts(posts.filter((_, i) => i !== index)) }

    return ( Create Post {posts.map((post, index) => ( handleDeletePost(index)}/> ))} ); }

    export default Home;

    INPUT

    import React from "react";

    function Input({formData, onStateChange }) { const handleState = (event) => { event.preventDefault() const { name, value } = event.target onStateChange({ [name]: value }) };

    return ( ); }

    export default Input;

    POSTDISPLAY

    import React from "react";

    function PostDisplay({formData, onDelete}) { const {title, description} = formData return (

    {title}

    {description}

    Delete ); }

    export default PostDisplay;

    `

    `

  • biswasmoutusi
     + 0 comments

    Anybody know, why I don't have anything in 'app.test.jsx' file? File is empty. Also it is showing below console error.

    Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: Object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

    I was able to solve this problem in my local but not able to run in this platform with the same solution.

  • hyein9007
     + 0 comments

    Home.js

    import Input from "./Input";
import PostDisplay from "./PostDisplay";

function Home() {
  const [postList, setPostList] = useState([]);
  const [titleInput, setTitleInput] = useState('');
  const [descInput, setDescInput] = useState('');

  const createPost = useCallback(() => {
    if (titleInput && descInput) {
      setPostList(prev => [...prev, {title: titleInput, desc: descInput}]);
      setTitleInput('');
      setDescInput('');
    }
  }, [titleInput, descInput]);

  return (
    <div className="text-center ma-20">
      <div className="mb-20">
        <Input titleInput={titleInput} setTitleInput={setTitleInput} descInput={descInput} setDescInput={setDescInput} />
        <button data-testid="create-button" className="mt-10" onClick={createPost}>
          Create Post
        </button>
      </div>
      <div className="posts-section">
        <PostDisplay postList={postList} setPostList={setPostList} />
      </div>
    </div>
  );
}

export default Home;

    Input

    import React from "react";

function Input({setTitleInput, titleInput, descInput, setDescInput}) {

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

export default Input;

    PostDisplay

    import React, { useCallback } from "react";

function PostDisplay({postList, setPostList}) {
  const deletePost = useCallback((idx) => {
    setPostList(prev => prev.filter((_, i) => i !== idx));
  }, []);
  return (
    <div data-testid="posts-container" className="flex wrap gap-10">
      { postList && postList.map((post, idx) => (
        <div className="post-box" key={idx}>
          <h3>{post.title}</h3>
          <p>{post.desc}</p>
          <button onClick={() => deletePost(idx)}>Delete</button>
        </div>
      ))}
    </div>
  );
}

export default PostDisplay;

  • AlicianaBaker23
     + 0 comments

    This project is a great way to build a solid understanding of React and apply your knowledge in a practical setting. 11xplay.online pro

  • ramakotireddy912
     + 0 comments

    Home

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

function Home() {
  const [posts, setPosts] = useState([]);
  const handleCreatePost = (title, description) => {
    const newPost = { title, description };
    setPosts([...posts, newPost]);
  };

  const handleDeletePost = (index) => {
    const updatedPosts = posts.filter((_, i) => i !== index);
    setPosts(updatedPosts);
  };

  return (
    <div className="text-center ma-20">
      <div className="mb-20">
        <Input onCreatePost={handleCreatePost} />
      </div>
      <div className="posts-section">
        <PostDisplay posts={posts} onDeletePost={handleDeletePost} />
      </div>
    </div>
  );
}

export default Home;

    Input

    import React, { useState } from "react";

function Input({ onCreatePost }) {
  const [title, setTitle] = useState('');
  const [description, setDescription] = useState('');

  const handleSubmit = () => {
    if (title && description) {
      onCreatePost(title, description);
      setTitle('');
      setDescription('');
    }
  };

  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={description}
        onChange={(e) => setDescription(e.target.value)}
        data-testid="description-input"
      />
      <button data-testid="create-button" onClick={handleSubmit} className="mt-10">
        Create Post
      </button>
    </div>
  );
}

export default Input;

    Posts Display

    import React from "react";

function PostDisplay({ posts, onDeletePost }) {
  return (
    <div data-testid="posts-container" className="flex wrap gap-10">
      {posts.map((post, index) => {
        return (
          <div key={index} className="post-box">
            <h3>{post.title}</h3>
            <p>{post.description}</p>
            <button onClick={() => onDeletePost(index)}>Delete</button>
          </div>
        )
      })}
    </div>
  );
}

export default PostDisplay;