title: How to pass selected props to a child's child in react using functinal components
body: <p>I wasn't being able to pass functions from a component to its child's child. At first I was using the following approach:</p>
  <p>This is my parent component:</p>
  <pre><code>function MainComponent() {
    
    const doSomething = () =&gt; {
      //do something
    };  
  
    const doSomethingElse = () =&gt; {
      //do something
    };
      
     
    return (
  
      &lt;&gt;
        &lt;form&gt;        
          &lt;CustomComponent state={currentState} doSomething={doSomething} doSomethingElse={doSomethingElse} /&gt;        
          &lt;button&gt;send&lt;/button&gt;
        &lt;/form&gt;    
      &lt;/&gt;
  
    );
  
  };
  
  export default MainComponent; 
  </code></pre>
  <p>This is the parent's child:</p>
  <pre><code>    function CustomComponent(props) {
    
    const {doSomething, doSomethingELse} = props;
    
    
    return (
      &lt;&gt;
        &lt;div className=&quot;container&quot;&gt;          
          &lt;div className=&quot;options&quot;&gt;          
            &lt;div className=&quot;option&quot;&gt;
              &lt;Selection className=&quot;radio&quot; type=&quot;radio&quot; id=&quot;one&quot; name=&quot;category&quot; doSomething={doSomething} /&gt;
              
            &lt;/div&gt;
            &lt;div className=&quot;option&quot;&gt;
              &lt;Selection className=&quot;radio&quot; type=&quot;radio&quot; id=&quot;two&quot; name=&quot;category&quot; doSomething={doSomething} /&gt;
              
            &lt;/div&gt;
            &lt;div className=&quot;option&quot;&gt;
              &lt;Selection className=&quot;radio&quot; type=&quot;radio&quot; id=&quot;three&quot; name=&quot;category&quot; doSomething={doSomething} /&gt;
              
            &lt;/div&gt;
            &lt;div className=&quot;option&quot;&gt;
              &lt;Selection className=&quot;radio&quot; type=&quot;radio&quot; id=&quot;four&quot; name=&quot;category&quot; doSomething={doSomething} /&gt;
              
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div className=&quot;selected&quot;&gt;
              &lt;Selection className=&quot;radio&quot; type=&quot;radio&quot; id=&quot;category&quot; name=&quot;menu&quot; doSomethingELse={doSomethingELse} /&gt;
              
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/&gt;
    );  
  };
  
  export default CustomComponent;
  </code></pre>
  <p>And this is the child's child:</p>
  <pre><code>function Selection(props) {
  
   
    const {doSomething, doSomethingElse} = props;
    
    useEffect(() =&gt; {
      doSomething();
    }, [id, doSomething]);
    
    
    useEffect(() =&gt; {
      doSomethingElse();
    }, [name, doSomethingElse]);
  //
    
    const changeHandler = event =&gt; {
      //SOME LOGIC 
    };
  
    const clickHandler = event =&gt; {
      //SOMELOGIC  
    };
  
    
    
    const element = 
    &lt;input
      className={props.className}
      type={props.type}
      id={props.id}
      name={props.name}
      onChange={changeHandler}
      onClick={ClickHandler}        
    /&gt;
  
    return(
      &lt;&gt;{element}&lt;/&gt;
    ); 
  };
  
  export default Selection;
  </code></pre>
  <p>When rendering my main component I got the following error:</p>
  <pre><code>TypeError: onTouch is not a function
  </code></pre>
  <p>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 <code>{...props}</code> instead of <code>doSomething={doSomething}</code>  and <code>doSomethingElse={doSomethingElse}</code> everything worked fine.</p>
  <p>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.</p>
  <p>Could someone please explain how this could be achieved?</p>