0
376
ViewsHow to pass object to another component in reactJs?
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.
Any help is really appreciated. Please find the link to the full code below
https://codesandbox.io/s/determined-nightingale-m2mtn?file=/src/components/Products/Watchlist.jsx
Thanks a million
2 answers
Answer question0
upon checking out your code, you made a mistake when passing the props. Currently you are doing this:
const Watchlist = (watchlist) => {
You should destructure and get the props first by doing this:
const Watchlist = ({ watchlist }) => {
0
Thanks for the support, but I figured out the solution by using two approaches and they are
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.
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.
https://codesandbox.io/s/determined-nightingale-m2mtn?file=/src/components/Products
The working app, where I can add the products to the watchlist.