CODEWITHSUNDEEP
javascriptreactjscomponentsreact-props
Gurudatt Puranik
Gurudatt Puranik

Reputation: 33

Unable to render a react component on click of a button

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;

Upvotes: 1

Views: 85

Answers (1)

Drew Reese
Drew Reese

Reputation: 202979

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>
  );
}

Edit unable-to-render-a-react-component-on-click-of-a-button

Upvotes: 1

Related Questions