React js onClick function in a map function is not recognized

Question

I got these array in React which I want to use for writing and iterating through a bunch of menuitems. Im setting the state in my hook to false as default and are using the functions toggleMyIdOne and toggleMyIdTwo to update the state.

const [myIdOneToggler, setMyIdOne] = useState(false);
const [myIdOneToggler, setMyIdTwo] = useState(false);

const toggleMyIdOne= () => {
    setMyIdOne(!myIdOneToggler);
}

const toggleMyIdTwo= () => {
    setMyIdTwo(!myIdTwoToggler);
}

function Menu() {
    const menuItems = [
        {
            id: "myIdOne",
            state: "myIdOneToggler",
            name: "toggleMyIdOne",
            setState: "setMyIdOne",
            label: "MyIdOne"
        },
        {
            id: "myIdTwo",
            state: "myIdTwoToggler",
            name: "toggleMyIdTwo",
            setState: "setMyIdTwo",
            label: "MyIdTwo"
        },

Further down Im returning this for updating the state of the checkbox once it is clicked.

{menuItems.map(item => (
    <div className="grid-item">
        <input onClick={item.name} type="checkbox" id={item.id} checked={item.state}/>
        <label htmlFor={item.id}>{item.label}</label>
    </div>

This is supposed to call the toggleMyIdOne and toggleMyIdTwo function. It works fine and as expected when it is not in a map function but in the mapfunction it seems to be something wrong with the way I am declaring the function name.

Im getting this errormessage:

Uncaught Invariant Violation: Expected onClick listener to be a function, instead got a value of string type.

It is obvious that react wont recognize the string from my declared array with menuitems as a function but I cannot figure out how I shall declare this to get it to work. Or is it not possible to do like this to make the code more compact.

Have you tried passing the function reference directly and not as a string? — ZombieTfk
– ZombieTfk, Commented Jul 4, 2019 at 18:27
You got this error because name is a string and you passed it to onClick event. — Sameer Reza Khan
– Sameer Reza Khan, Commented Jul 4, 2019 at 18:29
You can post what you are trying to achieve maybe there will be workaround . But I don't think there is solution for passing functiono name as string — ashok poudel
– ashok poudel, Commented Jul 4, 2019 at 18:30
Yes I actually want to pass the function name as a string. Or somehway else where it is possible to use my declared array for looping throgh the items — acroscene
– acroscene, Commented Jul 4, 2019 at 18:31
@ZombieTfk yes it works directlty but i want to have different functions based on the array — acroscene
– acroscene, Commented Jul 4, 2019 at 18:34

adel · Accepted Answer · 2019-07-04 19:04:52Z

1

here you are passing a String to click props wich it should accept only functions! to solve this u can do:

  {menuItems.map(item => (
    <div className="grid-item">
        <input onClick={()=>checkfunction(name)} type="checkbox" id={item.id} checked={item.state}/>
        <label htmlFor={item.id}>{item.label}</label>
    </div>

and if u want to fire each hook

const checkfunction=name={
if(name==="toggleMyIdOne")
    setMyIdOne(!myIdOneToggler);
else
    setMyIdTwo(!myIdTwoToggler);
}

answered Jul 4, 2019 at 19:04

adel

3,5051 gold badge10 silver badges20 bronze badges

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

Collectives™ on Stack Overflow

React js onClick function in a map function is not recognized

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related