title: Passing props from child to parent component
body: <p>I'm trying to pass some props from children to parent, and I've found this video on Youtube:</p>
  <pre><code>https://www.youtube.com/watch?v=BtImABK_VHo
  </code></pre>
  <p>I tried to implement that logic (the second approach) and I get some errors. Here's the code:</p>
  <p>The way I'm trying to render:</p>
  <pre><code>&lt;GameAnswers arrayAnswers={['Yes', 'No']} correctAnswer=&quot;Yes&quot; /&gt;
  </code></pre>
  <p>GameAnswers.tsx</p>
  <pre><code>import React, { useState } from 'react';
  import { ToggleButtonGroup, ToggleButton } from 'react-bootstrap';
  import './css/GameAnswers.css';
  
  type Answers = {
      arrayAnswers: Array&lt;string&gt;,
      correctAnswer: string
  }
  
  function GameAnswers(props: Answers) {
      const [selectedAnswer, setSelectedAnswer] = useState(&quot;&quot;);
  
      const handleAnswerChange = function (e: React.ChangeEvent&lt;HTMLInputElement&gt;) {
          setSelectedAnswer(e.target.value);
      }
  
      const determineButtonVariant = function (answer: string) {
          if (answer !== selectedAnswer) {
              return &quot;primary&quot;;
          } else if (answer === props.correctAnswer) {
              return &quot;success&quot;;
          } else {
              return &quot;danger&quot;;
          }
      }
  
      return {
          selectedAnswer,
          render: (
              &lt;div className=&quot;game-answers&quot;&gt;
                  &lt;ToggleButtonGroup type=&quot;radio&quot; name=&quot;answers&quot;&gt;
                      {props.arrayAnswers.map(function (answer) {
                          return &lt;ToggleButton
                              id={answer}
                              value={answer}
                              onChange={handleAnswerChange}
                              variant={determineButtonVariant(answer)}
                          &gt;{answer}&lt;/ToggleButton&gt;
                      })}
                  &lt;/ToggleButtonGroup&gt;
              &lt;/div&gt;
          )
      }
  }
  
  export default GameAnswers;
  </code></pre>
  <p>The errors:</p>
  <pre><code>'GameAnswers' cannot be used as a JSX component.
    Its return type '{ selectedAnswer: string; render: JSX.Element; }' is not a valid JSX element.
      Type '{ selectedAnswer: string; render: Element; }' is missing the following properties from type 'ReactElement&lt;any, any&gt;': type, props, key  TS2786
  </code></pre>
  <p>Is that approach from the video valid? The video is from 1 aug 2021, so it should be, but I get some errors as you can see and I don't really know how to fix them.</p>
  <p>If it is, what am I missing?</p>