Setmystate is not a function

Question

0.00/5 (No votes)

See more:

I have a Laravel 10 project with React.

I want to increment the Basket props.myState by 1 after clicking on the "Add to basket" button. It works when I use the ProductsMy component in the States2 component like this:

<productsmy products3="{products3}" mystate="{myState}" setmystate="{setMyState}/">

But I want to render it in a {children} prop. Below one line.

{/*<productsmy products3="{products3}" mystate="{myState}" setmystate="{setMyState}/">*/}
            {children}

When I use {children}, I got this message if I click on that button: setMyState is not a function.

Uncaught TypeError: setMyState is not a function
    at handleToBasketClick (ProductsMy.jsx?t=1689842814849:23:5)
    at HTMLUnknownElement.callCallback2 (react-dom.development.js:4164:14)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:16)
    at invokeGuardedCallback (react-dom.development.js:4277:31)
    at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:4291:25)
    at executeDispatch (react-dom.development.js:9041:3)
    at processDispatchQueueItemsInOrder (react-dom.development.js:9073:7)
    at processDispatchQueue (react-dom.development.js:9086:5)
    at dispatchEventsForPlugins (react-dom.development.js:9097:3)
    at react-dom.development.js:9288:12

I think with the children the component does not get this:

myState={myState} setMyState={setMyState}

How can I use it with {children}? The ProductsMy component is loaded into

{children}

If I uncomment the ProductsMy component it works.

What I have tried:

Here is the code:

States2 component

JavaScript

import {useState} from 'react';

function Basket(props) {
    return (
        <>
            <h1>In basket: {props.myState} DB</h1>
        </>
    );
}

export default function States2({children}) {
    const [myState, setMyState] = useState(0);

    return (
        <div className="App">
            <header className="App-header">
                <Basket myState={myState}/> {/* Show Basket komponent */}
            </header>
            {/*<ProductsMy products3={products3} myState={myState} setMyState={setMyState}/>*/}
            {children}
        </div>
    );
}

ProductsMy.jsx

JavaScript

import Button from "react-bootstrap/Button";
import States2 from "@/Pages/States2.jsx";

export default function ProductsMy({myState, setMyState}) {
    const handleToBasketClick = () => {
        setMyState(myState + 1);
    };

    const products3 = [
        {title: 'Product 1'},
        {title: 'Product 2'},
        {title: 'Product 3'},
        {title: 'Product 4'},
        {title: 'Product 5'},
    ]

    return (
        <States2>
            <div>
                {products3.map((product, index) => (
                    <div className="flex items-center" key={index}>
                        <div>{product.title}</div>
                        <Button onClick={handleToBasketClick}>Add to Basket</Button>
                    </div>
                ))}
            </div>
        </States2>
    )
}

And the backend route:

PHP

Route::get('/states2', function () {
    return Inertia::render('ProductsMy');
});

Posted 19-Jul-23 23:15pm

folza

Updated 19-Jul-23 23:47pm

Andre Oosthuizen

v3

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Andre Oosthuizen · Answer 1 · 2023-07-19T23:47:00

Laravel and React not one of my strong points. You need to explicitly pass the 'setMyState' function down from the parent component to your 'ProductsMy' component - Using a function in `setState` instead of an object [^]

Remove the '{children}' prop from your States2 component since it will not be used.
Pass the 'setMyState' function to your 'ProductsMy' component as a prop -

In your States2 component -

jsx

import { useState } from 'react';
import Basket from './Basket'; //You have to import the Basket component for it to work

export default function States2() {
  const [myState, setMyState] = useState(0);

  return (
    <div className="App">
      <header className="App-header">
        <Basket myState={myState} />
      </header>
      <ProductsMy myState={myState} setMyState={setMyState} /> {/* Pass the setMyState function as a prop */}
    </div>
  );
}

In your 'ProductsMy' component, use the 'setMyState' prop directly in the 'handleToBasketClick' function -

jsx

import Button from 'react-bootstrap/Button';

export default function ProductsMy({ myState, setMyState }) {
  const handleToBasketClick = () => {
    setMyState(myState + 1);
  };

  const products3 = [
    { title: 'Product 1' },
    { title: 'Product 2' },
    { title: 'Product 3' },
    { title: 'Product 4' },
    { title: 'Product 5' },
  ];

  return (
    <div>
      {products3.map((product, index) => (
        <div className="flex items-center" key={index}>
          <div>{product.title}</div>
          <Button onClick={handleToBasketClick}>Add to Basket</Button>
        </div>
      ))}
    </div>
  );
}

[EDIT/ADDITIONAL INFORMATION]
As the above returns a similar outcome for you when you uncomment

jsx

/*<ProductsMy products3={products3} myState={myState} setMyState={setMyState}/>*/

, you can use an alternative solution using 'React.cloneElement' - React.cloneElement() Function [^]

Remove the import of the 'ProductsMy' component from your States2 component, as it will be rendered through the '{children}' prop.
In your 'States2' component, use 'React.cloneElement' to pass the 'setMyState' function to your 'ProductsMy' component when rendering it through the '{children}' prop -

States2 component -

jsx

import React, { useState, useEffect } from 'react';
import Basket from './Basket'; // Make sure to import the Basket component correctly

export default function States2({ children }) {
  const [myState, setMyState] = useState(0);

  useEffect(() => {
    // Function to pass down to the child components
    const updateState = (newState) => {
      setMyState(newState);
    };

    // Clone the children and pass the updateState function to them
    const clonedChildren = React.Children.map(children, (child) => {
      return React.cloneElement(child, { myState, updateState });
    });

    return () => {}; // Empty cleanup function
  }, [children]);

  return (
    <div className="App">
      <header className="App-header">
        <Basket myState={myState} />
      </header>
      {children}
    </div>
  );
}

ProductsMy -

jsx

import React from 'react';
import Button from 'react-bootstrap/Button';

export default function ProductsMy({ myState, updateState }) {
  const handleToBasketClick = () => {
    updateState(myState + 1);
  };

  const products3 = [
    { title: 'Product 1' },
    { title: 'Product 2' },
    { title: 'Product 3' },
    { title: 'Product 4' },
    { title: 'Product 5' },
  ];

  return (
    <div>
      {products3.map((product, index) => (
        <div className="flex items-center" key={index}>
          <div>{product.title}</div>
          <Button onClick={handleToBasketClick}>Add to Basket</Button>
        </div>
      ))}
    </div>
  );
}

Maybe not exactly what you require but you can tweak this to work for you.