How to pass selected props to a child's child in react using functinal components

Question

I wasn't being able to pass functions from a component to its child's child. At first I was using the following approach:

This is my parent component:

function MainComponent() {
  
  const doSomething = () => {
    //do something
  };  

  const doSomethingElse = () => {
    //do something
  };
    
   
  return (

    <>
      <form>        
        <CustomComponent state={currentState} doSomething={doSomething} doSomethingElse={doSomethingElse} />        
        <button>send</button>
      </form>    
    </>

  );

};

export default MainComponent; 

This is the parent's child:

    function CustomComponent(props) {
  
  const {doSomething, doSomethingELse} = props;
  
  
  return (
    <>
      <div className="container">          
        <div className="options">          
          <div className="option">
            <Selection className="radio" type="radio" id="one" name="category" doSomething={doSomething} />
            
          </div>
          <div className="option">
            <Selection className="radio" type="radio" id="two" name="category" doSomething={doSomething} />
            
          </div>
          <div className="option">
            <Selection className="radio" type="radio" id="three" name="category" doSomething={doSomething} />
            
          </div>
          <div className="option">
            <Selection className="radio" type="radio" id="four" name="category" doSomething={doSomething} />
            
          </div>
        </div>
        <div className="selected">
            <Selection className="radio" type="radio" id="category" name="menu" doSomethingELse={doSomethingELse} />
            
        </div>
      </div>
    </>
  );  
};

export default CustomComponent;

And this is the child's child:

function Selection(props) {

 
  const {doSomething, doSomethingElse} = props;
  
  useEffect(() => {
    doSomething();
  }, [id, doSomething]);
  
  
  useEffect(() => {
    doSomethingElse();
  }, [name, doSomethingElse]);
//
  
  const changeHandler = event => {
    //SOME LOGIC 
  };

  const clickHandler = event => {
    //SOMELOGIC  
  };

  
  
  const element = 
  <input
    className={props.className}
    type={props.type}
    id={props.id}
    name={props.name}
    onChange={changeHandler}
    onClick={ClickHandler}        
  />

  return(
    <>{element}</>
  ); 
};

export default Selection;

When rendering my main component I got the following error:

TypeError: onTouch is not a function

My suspicion was that I was passing my props incorrectly from the child component to it's child, and after some research I found that if I passed the props from the child's component to its child as {...props} instead of doSomething={doSomething} and doSomethingElse={doSomethingElse} everything worked fine.

But I don't want to pass both functions to each child, i just one to pass one, and I haven't been able to figure out how to do it.

Could someone please explain how this could be achieved?

Answer 1

everything is fine in your program except the node or child's child component, as you have destructured the doSomething and doSomethingElse in node component and passing only one of them at time that means one of them will always be undefined. Let suppose if you pass doSomething then doSomethingElse will be undefined and then it creates an error when you pass it to useEffect