How to pass object to another component in reactJs?

Get Help React.js
,
#1

I Am trying to figure out how can I add the items to watchlist,

The steps am trying to carry out here are, when a user clicks on add button, the items should be added to the watchlist page/component which I have created.

Please see the hierarchy of the component. I would like to show added items on the watchlist page.

Please see the code I tried.

const [watchlist, setWatchlist] = useState ([]);

const handleWatchlist = (movieData) => {
   const newList = [...watchlist, movieData]
   setWatchlist(newList)
   console.log(newList)
}




<Button className = {classes.cardButton}size = "small" onClick = {  ()=> handleWatchlist(movie) }> Add </Button>

When I try to inspect, the result is, it shows the items are added on the console as well into the state but can not pass on to the watchlist component? How can I use a prop to pass this value and show them in the watchlist component? or is its props not the right way to pass any object into a component?

The result on the console is as below.

image
image1898Ă—182 19.1 KB

Any help is really appreciated. Please find the link to the full code below

Thanks a million

#2

Hi,
I couldn’t find the snippet you posted here in your full code.
Generally speaking you just pass function references as props and call them in the child component on an html element: onClick = {handleWatchlist}

Why did you write this like a child component with capital letter? It just seems to be a regular button.
I haven’t understood your structure, yet: Which is the parent component and which is the child component that should receive the props?

#3

Hi @mirja_t ,

Thanks for the reply, the button which you saying is a component of material UI hope this might help you to understand the component details, please refer Material Icons - Material-UI for more details on material UI.

Also apologize if you can not find the full code there.

Please see new link below,

Thanks for the help

#4

Ok, so this is your watchlist component, right?

import React from "react";

const Watchlist = ({ id, title, poster_path }) => {
  console.log(title);
  return (
    <>
      <div>
        <h3>{id}</h3>
        <h3>{title}</h3>
        <img
          alt="movieimage"
          src={`https://image.tmdb.org/t/p/original/${poster_path} `}
        />
      </div>
    </>
  );
};

export default Watchlist;

Which component renders it? I couldn’t find one.

#5

Hi @mirja_t Exactly Yeah,

This is my component, and I am passing the props when the button is clicked in product component. Hope making sense.

I also have updated the code in codesandox link which I forwarded at first.

and this component is rendered or shown when a user click on watchlist button which is on navigation bar inside my profile icon on 2nd number.

Please see the app link

https://m2mtn.csb.app/watchlist

image
image1902Ă—322 97.4 KB

#6

I saw your component – that’s the code I posted. But it is not rendered anywhere yet.
And there aren’t any props passed to that component either.
You’re just calling a function that sets the state. But that state never gets anywhere…

1 Like
#7

Hi @mirja_t Okay,

I tried to use this destructuring method as well where am passing the props,


 const handleWatchlist = (movieData) => {
    const newList = [...watchlist, movieData];
    setWatchlist(newList);
    return newList.map((w) => (
      <Watchlist
        key={w.id}
        id={w.id}
        title={w.title}
        poster_path={w.poster_path}
      />
    ));
  };
#8

Ok I found the handleWatchlist function now. Yet still the same problem: Where is the code rendered/injected? handleWatchlist is just a function returning a component – that from what I see never gets rendered.

#9

That’s the same point, how can I pass or show the data into watchlist component such that when user clicks it updates the watchlist with that selected Item/Movie

#10

Before talking of passing props, you have to render the component. So back to basics. You can save the component in a variable like

const watchlist = newList.map((w) => (
      <Watchlist
        key={w.id}
        id={w.id}
        title={w.title}
        poster_path={w.poster_path}
      />
    ));

and inject it somewhere in your return statement:

return (
    <>
       ... some html
       {watchlist}
   </>)

or put it directly in your return statement.
I don’t see the point in having it in the handleClick function. That function should just update the state.

1 Like
#11

Hi @mirja_t ,
I tried your way as well but seems like its not working. Any thought?

#12

Please post the relevant and refactored code here, there is a lot of code in the code sandbox that is irrelevant for this and it’s a bit laborious to work my way through it.
Please post the code of two components without the imports and all that – with a headline which component is which:
The component with the function to update the state and the component that should receive the updated state and show the images (watchlist) and the part where Watchlist is returned in the return statement of the component rather than in a variable or function.

#13

Hi @mirja_t ,

Thanks for the support, but I figured out the solution by using two approaches and they are

  1. Which is props drilling, i.e. is to perform the useState action in my App.js which is my main page where I have product and watchlist component.
  2. This is the best way I would suggest other people use as well is by using the contextAPI and useContext hooks . A simple and easy way to pass any data anywhere in the app.

Please see the full code with the working solution below on the codesandbox.

The working app, where I can add the products to the watchlist.

working demo app