Call Function out of React Component

Question

I want to update a shopping cart when I click on a Product. But I don't know, how to call the function in another component.

This is, where the function is written and the state of the cart is hold.

    export const Cart = () => {
    const [userId, setUserId] = useState(7);
    const [cart, setCart] = useState([]);
    const [outfitName, setOutfitName] = useState("");
    
    const sendOutfit = () => {
        axios.post(`{url}/postOutfit`, {
            userId,
            outfitName,
            cart,
        });
    };
    
    function addToCart(id) {
        cart.push(id);
        setCart(cart);
    }
...
}

Here I want to call the addToCart function.

import { Cart } from "../../sites/Cart/Cart";
...

 <div className="product-name">
                    <button
                        className="button is-small is-outlined is-primary"
                        onClick={() =>
                            Cart.addToCart(product.id) & changeButtonText
                        }
                    >
                        {buttonText}
                    </button>
                </div>

When I try to execute this, I get the following error message:

Do you have any suggestion for me?

Thank you very much!

It doesn't work like that, you have to pass down the addToCart function as a prop. (The Cart you're importing is the function itself, not the rendered instance in your running app. Even if it were, Cart.addToCart is undefined because addToCart is a function defined inside the Cart function, not a property of it) — user5734311
– user5734311, Commented Feb 10, 2022 at 13:07
How are these two components related? Where does one of them render the other one? — David
– David, Commented Feb 10, 2022 at 13:08
Please read How to Ask, where it notes, "DO NOT post images of code, data, error messages, etc. - copy or type the text into the question." — Heretic Monkey
– Heretic Monkey, Commented Feb 10, 2022 at 13:15

skelaw · Accepted Answer · 2022-02-10 13:19:43Z

1

You can not do this like that. Below I wrote simple example and here is nice article I suggest to read it first: Components and Props

const AddToCartButton = ({ setCart }) => {
  return (
    <button
      onClick={() => {
        setCart("item");
      }}
    ></button>
  );
};
const Cart = () => {
  const [cart, setCart] = React.useState([]);
  return <AddToCartButton setCart={setCart} />;
};

answered Feb 10, 2022 at 13:19

skelaw

2926 silver badges21 bronze badges

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

Comments

Haim Abeles · Accepted Answer · 2022-02-10 13:14:17Z

0

Methods in React return JSX values and in this way it is not correct to export a method, if you want to export the method of addToCart to a another component you need to send this method as propeties or using state management for example as follows:

    export const Cart = () => {
    const [userId, setUserId] = useState(7);
    const [cart, setCart] = useState([]);
    const [outfitName, setOutfitName] = useState("");
    
    const sendOutfit = () => {
        axios.post(`{url}/postOutfit`, {
            userId,
            outfitName,
            cart,
        });
    };
    
    function addToCart(id) {
        cart.push(id);
        setCart(cart);
    }

   return <AnotherComponent addCartFunc={addToCart} />

}

Then you can use this method in the host component as follows:

export const Cart = ({addCartFunc}) => {
   return (
        <div className="product-name">
            <button
                className="button is-small is-outlined is-primary"
                onClick={() =>
                    addCartFunc(product.id) & changeButtonText
                }
            >
                {buttonText}
            </button>
        </div>
   )
}

answered Feb 10, 2022 at 13:14

Haim Abeles

1,0218 silver badges21 bronze badges

3 Comments

jansemrau Over a year ago

Thank you for your suggestions. My Problem is, that the Cart is not a parent component of the ProductCards. They are created out of o List of Products. Is ist useful to have the state in a react.context?

Haim Abeles Over a year ago

In this case you will use state manegemt to pass the method, for example useConext Hook Would you like me to attach an explanation of how to use it?

jansemrau Over a year ago

Or is it easer to set a cookie or sessionStorage and after the products are buyed, this cookie or sessionStorage-Item will be deleted

Collectives™ on Stack Overflow

Call Function out of React Component

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related