How to pass object to another component in reactJs?

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.

https://codesandbox.io/s/determined-nightingale-m2mtn?file=/src/components/Products

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

working demo app

First, you'll need to create two components, one parent and one child.

import React from 'react'

export default function Parent() {
  return (
    <div>
      
    </div>
  )
}

import React from 'react' export default function Parent() { return ( <div> </div> ) } Parent.js

import React from 'react'

export default function Child() {
    return (
        <div>
            
        </div>
    )
}

Next, you'll import the child component in the parent component and return it.

import React from 'react'
import Child from './Child';

export default function Parent() {
  return (
    <div>
      <Child/>
    </div>
  )
}

Then you'll create a function and a button to trigger that function. Also, you'll create a state using the useState Hook to manage the data.

import React from 'react'
import Child from './Child';
import { Button } from 'semantic-ui-react';
import { useState } from 'react';
import './App.css';

export default function Parent() {
  const [data, setData] = useState('');
  
  const parentToChild = () => {
    setData("This is data from Parent Component to the Child Component.");
  }
  return (
    <div className="App">
      <Child/>
      
      <div>
        <Button primary onClick={() => parentToChild()}>Click Parent</Button>
      </div>
    </div>
  )
}

Pass the data as props when you are calling the child component like this:

<Child parentToChild={data}/>

Normally you start out with React's JSX syntax for rendering something to the browser when learning about React. Basically JSX mixes HTML with JavaScript to get the best of both worlds.

import React, { Component } from 'react';
class App extends Component {  render() {    const greeting = 'Welcome to React';
    return (      <div>        <h1>{greeting}</h1>      </div>    );  }}
export default App;

Normally you start out with React's JSX syntax for rendering something to the browser when learning about React. Basically JSX mixes HTML with JavaScript to get the best of both worlds.

import React, { Component } from 'react';
class App extends Component {  render() {    const greeting = 'Welcome to React';
    return (      <div>        <h1>{greeting}</h1>      </div>    );  }}
export default App;

Pretty soon you will split out your first React component.

import React, { Component } from 'react';
class App extends Component {  render() {    return (      <div>        <Greeting />      </div>    );  }}
class Greeting extends Component {  render() {    const greeting = 'Welcome to React';
    return <h1>{greeting}</h1>;  }}
export default App;

Pretty soon you will split out your first React component.

import React, { Component } from 'react';
class App extends Component {  render() {    return (      <div>        <Greeting />      </div>    );  }}
class Greeting extends Component {  render() {    const greeting = 'Welcome to React';
    return <h1>{greeting}</h1>;  }}
export default App;

A common question followed by this act: how to pass the data as params (parameters) from one React component to another component? That's because you don't want to have a component rendering static data, but pass dynamic data to your component instead. That's where React's props come into play. You can pass data in React by defining custom HTML attributes to which you assign your data with JSX syntax. So don't forget the curly braces.

import React, { Component } from 'react';
class App extends Component {  render() {    const greeting = 'Welcome to React';
    return (      <div>        <Greeting greeting={greeting} />      </div>    );  }}
class Greeting extends Component {  render() {    return <h1>{this.props.greeting}</h1>;  }}
export default App;