sending props to components on separate pages

./Components/Categories.jsx

import CategoryData from "../mocks/categories.json"
import Products from './Products'

function Categories() {
  return  CategoryData.map((cat)=> <li onClick={ ()=> <Products id={cat.id} /> }> </li>) 

}

./Components/Products.jsx

function Products(props) {
    console.log(props.id)
}

I need to send props to another component in OnClick. but the code I wrote didn’t work.

>Solution :

Hi there you are doing one thing wrong.
We cann’t render a component within an event handler.

You can do this like :

import React, { useState } from "react";
import CategoryData from "../mocks/categories.json";
import Products from "./Products";

function Categories() {
  const [categroy, setCategroy] = useState(null);

  const clickCategory = (cat) => {
    setCategroy(cat);
  };

  return (
    <ul>
      {CategoryData.map((cat) => (
        <li key={cat.id} onClick={() => clickCategory(cat)}>
          {cat.name}
        </li>
      ))}
      {categroy && <Products id={categroy.id} />}
    </ul>
  );
}

export default Categories;