Need help :/ Passing multiple methods as props

I am looking for someone with experience in React, I know it’s probably something very easy I’m overlooking so if you could help I would appreciate it. Trying to teach myself React from books and other resources, have no one to ask. I have multiple methods in my App component I’m sending down as props, the methods travel through 3 Components until they reach their target. One method works just fine but the others which are made in the same fashion do not.

example:

const App = () => {

const f1 = () => {...}

const f2 = () => {...} <= Pretend these are functions

const f3 = () => {...}

return (

<div>

<Component1 f1={f1} f2={f2} f3={f3} />

<Component2 />

</div>

)

}

Const Component1 = (props) => {

return (

<div>

<Child1 {...props} />

<Child2/>

</div>

)

}

const Child1 = (props) => {

return (

<div>

<Grandchild1 {...props} />

<Grandchild2 {...props}/>

<Grandchild3{...props}/>

</div>

)

}

Now this is where I’m having the problem each Grandchild Component is made in the exact same way with only small variations, but for example will all be the same. Grandchild1 needs f1, Grandchild2 needs f2, and Grandchild3 needs f3. All are something like this:

const Grandchild1 = (props) => {

const handleClick = (e) => {

e.preventDefault();

props.f1();

}

return (

<div>

<button onClick={handleClick} >example</button>

</div>

)

}

Grandchild1 works perfectly fine like this, however Grandchild 2 & 3 do not, they are the same other than props.f1() changes to props.f2() and props.f3(); I hope this is a clear enough example for someone to help me, if you have the time to hop in a call for 5 minutes to see and better understand the source code that would be dope, but I have a feeling that’s not necessary one of the smart ones see the problem . Thanks in advance :slight_smile:

Solution: App passes Component1 the three methods as props={{ f1, f2 ,f3 }} then in Grandchild components they are accessed with props.props.f1(), props.props.f2(), props.props.f3().

I never tried to pass multiple props through multiple components with spread syntax and without explicitly setting an attribute name. It looked quite smart, but I assumed that the attribute names might get lost this way. So I tried that with my project, but it seems like it’s working just fine. Everything seems to arrive in the grandchild component and I could access it there with ‘props.fn1’ and so forth. Are you sure that you did not have a simple typo,maybe? Something like a missing space that spoilt it? (Did not check that though)

Maybe it was type, I’m dyslexic so it’s hard to tell sometimes, but I used copy/paste for everything so I was pretty sure it wasn’t typo. Glad it’s working in your project.

The code snipped I quoted has a missing space. I haven’t tried if that causes the problem, but maybe that’s the culprit. Other than that the code you posted seems to work well…