Funtional Component is not calling anoyther component

1

HI,
here my main aim is to pass the id to other component during onclick.So i created a funcition call during onclick and that function should send props which is (pid) to Addtocart component and this Addtocart component should take the value and display onto console or to screen.
The problem is when i press onclick react is calling Addtoproducts and the id is also passed to Addtoproducts function but the id is not sent as props to Addtocart component
If there are any suggestions to improve this code please let me know

I am pasting my code with 2 files {showproduct.js,addtocart.js}

->showproduct.js

import React,{useState} from "react"
import ProductDetails from "./Data/ProductDetails.json"
import Addtocart from "./Addtocart"
const Addproducts=(id)=>{
  console.log(id)
  return <Addtocart pid="hello"/>
}
const Showproduct = ({match}) =>{
return(
        <div>
           {
                ProductDetails.map(data =>{
                    if(data.id == match.params.id)
                    {
                    return(
                        <div>
       <button className="btn btn-primary" onClick={() =>Addproducts(data.id)}>Add to cart</button>
                        </div>
                            )
                }
            }
        }
            
            </div>
    )
        }
export default Showproduct

->Addtocart.js

import React from "react";
const Addtocart =({pid}) =>
{
  
  return(console.log(pid))
}
export default Addtocart

Thanks in advance

2

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

3

There are a lot of little problems here so it is hard to understand what you are trying to do.
What is the shape of the DOM element you are trying to return here:

return(
  </div>
    <button className="btn btn-primary" onClick={() =>Addproducts(data.id)}>. 
   <&nbsp;&nbsp;Add to cart</button
    </div>
     </div>
)

I see three close div tags but no open. The close tag for the button is incomplete.

Also, your click is onClick handler is supposed to do something, not return something. I’m not sure what that would do if it was working the way you wanted.

Your Addtoproducts is just returning Addtocart. but what does Addtocart return? It returns undefined because that is what console.log “returns” - so React won’t render it anyway.

Perhaps if you made it clearer what you are trying to do, that would help.