title: How to pass onclick method to child component from parent using react, typescript, and styled-component?
body: <p>I want to pass the onclick method from child to parent using react and typescript.</p>
  <p><strong>what I am trying do?</strong></p>
  <p>I have a parent component which renders child component and is like below,</p>
  <pre><code>function Parent() {
      const [isDialogOpen, setisDialogOpen] = useState('');
      const set =() =&gt; {
          setisDialogOpen(!isDialogOpen);
      }
  
      return (
          &lt;Child size={16} fontSize={12}/&gt;
      );
  }
  
  interface Props {
      size?: number;
      fontSize?: number;
  }
  
  const Child = styled.div&lt;Props&gt;`
      font-size: ${p =&gt; (p.fontSize ? p.fontSize + 'px' : '8px')};
      size: ${p =&gt; (p.fontSize ? p.fontSize + 'px' : '12px')}
  `;
  
   export default Child;
  </code></pre>
  <p>Now, how can I add onClick method to the Child component such that it sets the isDialogOpen state?</p>
  <p><strong>what I tried?</strong></p>
  <p>I was trying to do something like below,</p>
  <pre><code>function Parent() {
      const [isDialogOpen, setisDialogOpen] = useState('');
      const setDialog =() =&gt; {
          setisDialogOpen(!isDialogOpen);
      }
  
      return (
          &lt;Child onClick={setDialog} size={16} fontSize={12}/&gt;
      );
  }
  
  interface Props {
      onClick?: () =&gt; void;
      size?: number;
      fontSize?: number;
  }
  
  const Child = styled.div&lt;Props&gt;`
      font-size: ${p =&gt; (p.fontSize ? p.fontSize + 'px' : '8px')};
      size: ${p =&gt; (p.fontSize ? p.fontSize + 'px' : '12px')}
  `;
  
   export default Child;
  </code></pre>
  <p>But how can I add the onClick method to div near this line?</p>
  <pre><code>const Child = styled.div&lt;Props&gt;`
      font-size: ${p =&gt; (p.fontSize ? p.fontSize + 'px' : '8px')};
      size: ${p =&gt; (p.fontSize ? p.fontSize + 'px' : '12px')}
  `;
  
  
  
  
  
  
  
      
  </code></pre>