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 