Unable to render a react component on click of a button

Question

I have two components: MainContainer and Cart. In MainContainer, I have a button & when clicked it calls a function addToCart with an id argument, which then has to render the Cart component. I am passing that argument as a prop and then extracting the prop value in the Cart component. Wwhen I click on the button, component is not getting rendered. There are no errors as well.

MainContainer.js

import React, { useState } from "react";
import Cart from "./Cart";
import { data } from "./data";
import { Link } from "react-router-dom";

function MainContainer() {
  function addToCart(id) {
    return (
      <div>
        <Cart id={id}></Cart>
      </div>
    );
  }

  return (
    <div className=" grid grid-cols-6">
      {data.map((item) => (
        <div
          key={item.id}
          className="  w-52 h-64 m-6 flex flex-col bg-gray-100 shadow-lg border-gray-200 border p-4 items-center justify-center rounded-lg relative"
        >
          <Link to="/cart">
            {" "}
            <i
              className="fa-solid fa-cart-plus absolute top-3 right-3 cursor-pointer text-lg"
              onClick={() => addToCart(item.id)}
            ></i>
          </Link>
          <img className=" w-32 h-32" src={item.image} alt="" />
          <div className=" bg-gray-300 w-full p-2 rounded-lg mt-2 text-center">
            <p className=" font-semibold text-lg"> {item.name}</p>
            <p>$ {item.price}</p>
            <p>{item.rating}</p>
          </div>
        </div>
      ))}
    </div>
  );
}

export default MainContainer;

Cart.js

import React from "react";

function Cart(props) {
  return (
    <div>
      <h1>hi {props.id} </h1>
    </div>
  );
}

export default Cart;

Drew Reese · Accepted Answer · 2022-07-06 07:42:50Z

1

addToCart is a callback, it can't return JSX to be rendered. You can store the id in local component state and then conditionally render the Cart component when the id state is populated.

Example:

function MainContainer() {
  const [id, setId] = React.useState(); // <-- initially undefined

  function addToCart(id) {
    setId(id); // <-- defined
  }

  return (
    <div className=" grid grid-cols-6">
      {data.map((item) => (
        <div
          key={item.id}
          className="...."
        >
          <Link to="/cart">
            <i
              className="...."
              onClick={() => addToCart(item.id)}
            />
          </Link>
          <img className=" w-32 h-32" src={item.image} alt="" />
          <div className="....">
            <p className=" font-semibold text-lg"> {item.name}</p>
            <p>$ {item.price}</p>
            <p>{item.rating}</p>
          </div>
        </div>
      ))}

      {id && (
        <div>
          <Cart id={id} /> {/* render Cart if id defined */}
        </div>
      )}
    </div>
  );
}

edited Jul 6, 2022 at 7:42

answered Jul 6, 2022 at 7:26

Drew Reese

207k20 gold badges282 silver badges293 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Gurudatt Puranik Over a year ago

Thanks Drew, but I am still facing the same problem.

Drew Reese Over a year ago

@GurudattPuranik Do you have an example of the data array that is being mapped?

Gurudatt Puranik Over a year ago

import C1 from "../img/c1.png"; import C2 from "../img/c2.png"; import C3 from "../img/c3.png"; import C4 from "../img/c4.png"; import C6 from "../img/c6.png"; import C7 from "../img/c7.png"; export const data = [ { id: 1, image: C1, name: "Chicken", price: "5", rating: "⭐⭐⭐⭐", }, { id: 2, image: C2, name: "Dosa", price: "8", rating: "⭐⭐⭐", }, { id: 3, image: C3, name: "Grilled Fish", price: "15", rating: "⭐⭐⭐⭐⭐", ];

Drew Reese Over a year ago

@GurudattPuranik The Link wrapping the i element needs to be clickable. I've added a codesandbox demo to my answer.

Gurudatt Puranik Over a year ago

Hey Drew, that link is clickable. I am able to console log the data. Just that It's not rendering.

|

Collectives™ on Stack Overflow

Unable to render a react component on click of a button

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related