This is my Inventory.js file where I map through and pass it in Detail component as a props

Data flow be like

Inventory.js >>> Detail.js >>> Product.js

But I don't know how can I solve this error. Getting undefined in product.js but others working find.

My Custom hook where I am getting all data.

useProducts.js

const baseURL = "http://localhost:5000/inventory";

const useProducts = () => {

  const [products, setProducts] = useState([])

  useEffect(() => {
    axios.get(`${baseURL}`).then((res) => {
      setProducts(res.data);
      // console.log(setProducts)
    });
  }, []);

  return [products, setProducts]
};

Inventory.js

const Inventory = () => {
  const [products, setProducts] = useProducts([]);
  // console.log(products)
  return (
    <div>
      <div className="products-container">
        {products.map((product) => (
          <Detail key={product._id} product={product}/>
        ))}
      </div>
    </div>
  );
};

export default Inventory;

Which is working perfectly and this my Detail.js code

Detail.js

const Detail = (props) => {
  const { _id, name, description, price, supplier_name, url, quantity } = props.product;

  const navigate = useNavigate();

  const goProduct = (id) => {
    navigate(`/inventory/${id}`);
    console.log("Product clicked")
    console.log(props.product);
  };

  return (
    <div>
      <div className="product-contrainer">
        <div className="product-card">
          <img src={url} className="product-image" id="image-product" alt="" />
          <h4 className="product-title">Product Name: {name}</h4>
          <p className="product-text price">Price: {price}$</p>
          <div className="buttons justify-content-evenly">
            <button
              className="custom-btn btn-16"
              onClick={() => goProduct(_id)}
              product={props.product}
            >
              Detail
            </button>
            <button className="buttons-section order custom-btn btn-14">
              Order
            </button>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Detail;

Now I want to pass that same prop data to another component called Product(Product.js) and here is the code but it returns undefined. I made dynamic routes for that

Product.js

const Product = (props) => {

  const {name, description, price, supplier_name, url, quantity} = props.props.product;
  
  return (
    <div>
      <div className="product-contrainer">
        <img src={url} className="product-image" alt="" />
        <h4 className="product-title">Product Name: {name}</h4>
        <p className="product-text description">Description: {description} </p>
        <p className="product-text suplier">Suplier: {supplier_name}</p>
        <p className="product-text quantity">Quantity: {quantity}</p>
        <p className="product-text price">Price: {price}$</p>
      </div>
    </div>
  );
};

export default Product;

CodePudding user response：

You are not creating the Product as a JSX component in Detail, but you are navigating to a component that creates Product. Therefore, you can use the route params during navigation and pass the desired data this way.

const goProduct = (id) => {
    navigate(`/inventory/${id}`, {state: props.product});
};

In your Product component, you can access them as follows.

const Product = () => {
  const location = useLocation();
  const {name, description, price, supplier_name, url, quantity} = location.state
}

CodePudding user response：

Based on your code, I can't see how the Product component will be used in the Details component. But the problem here is most probably this line:

const {name, description, price, supplier_name, url, quantity} = props.props.product;

You should access it this way:

const {name, description, price, supplier_name, url, quantity} = props.product;

Because props.product is passed as a property into product as in this line:

            <button
              className="custom-btn btn-16"
              onClick={() => goProduct(_id)}
              product={props.product}
            >

So within the component it is now props.product