CODEWITHSUNDEEP
javascriptreactjs
Kisan Kumavat
Kisan Kumavat

Reputation: 97

How to use onClick event on Card.js component to render Article.js Component in React?

Right now i am in Home.js page and i want to render Article.js component/page when user click on particular card (Card.js component). Here is my Home.js code

const Home = () => {
  const posts = useSelector((state) => state.posts)
  const [currentId, setCurrentId] = useState(null)

  const handleClick = () => {
    return <Article />
  }

  return (
    <div className="container">
      <h4 className="page-heading">LATEST</h4>
      <div className="card-container">
        {
          posts.map(post => <Card key={post._id} post={post} setCurrentId={setCurrentId} onClick={handleClick} />)
        }
      </div>
    </div>
  )
}

ONE MORE PROBLEM : How can I send post variable into onClick method? when i send it method is getting called.

Thank You in Advance :)

Upvotes: 0

Views: 748

Answers (3)

Linda Paiste
Linda Paiste

Reputation: 42228

I do agree with @Jackson that you might want to to look into React Router. But you don't need it. You can conditionally render the Article component based on the currentId.

A click handler shouldn't return anything. Instead of returning the <Article /> from the onClick callback, you would use onClick to control the currentId state. You can pass a function that sets the currentId to the post id based on the post variable in your map like this: onClick={() => setCurrentId(post._id)}.

The return for your Home component will either render the list of posts or a current post, depending on whether or not you have a currentId or just null.

const Home = () => {
  const posts = useSelector((state) => state.posts);
  const [currentId, setCurrentId] = useState(null);

  return (
    <div className="container">
      {currentId === null ? (
        // content for list of posts - when currentId is null
        <>
          <h4 className="page-heading">LATEST</h4>
          <div className="card-container">
            {posts.map((post) => (
              <Card
                key={post._id}
                post={post}
                // arrow function takes no arguments but calls `setCurrentId` with this post's id
                onClick={() => setCurrentId(post._id)}
              />
            ))}
          </div>
        </>
      ) : (
        // content for a single post - when currentId has a value
        <>
          <div
            // setting currentId to null exits the aritcle view
            onClick={() => setCurrentId(null)}
          >
            Back
          </div>
          <Article
            // could pass the whole post
            post={posts.find((post) => post._id === currentId)}
            // or could just pass the id and `useSelector` in the Article component to select the post from redux
            id={currentId}
            // can pass a close callback to the component so it can implement its own Back button
            onClickBack={() => setCurrentId(null)}
          />
        </>
      )}
    </div>
  );
};

Upvotes: 1

Jackson Lewis
Jackson Lewis

Reputation: 31

It sounds like you want to use the React Router? As I take it you want to load the post as its own page?

I should also point out that any function passed to onClick cannot return anything. The only purpose return can serve in an event function is to exit the function early.

Upvotes: 3

bluehipy
bluehipy

Reputation: 430

To pass in the click hadler the params you want, one could do something like this:

      posts.map(post => 
        <Card 
           key={post._id} 
           post={post} 
           onClick={() => handleClick(post)} />
      )

Upvotes: 1

Related Questions