title: Invalid hook statement, conversion to work with class
body: <pre><code>import React, { Component } from &quot;react&quot;;
  
  export class Register extends Component {
  
    render() {
  
  
  ====&gt;  const [selectedGoal, setSelectedGoal] = React.useState(1);
  
      const goal = [
        {
          label: &quot;Muscle Gain&quot;,
          id: 1,
        },
        {
          label: &quot;Fat Loss&quot;,
          id: 2,
        },
        {
          label: &quot;Maintaining&quot;,
          id: 3,
        },
      ];
  
      const details = [
        {
          label: &quot;1 pound per week&quot;,
        },
        {
          label: &quot;0.5 pounds per week&quot;,
        },
        {
          label: &quot;0.25 pounds per week&quot;,
        },
      ];
      return (
        &lt;SafeAreaView
          style={{ flex: 1, backgroundColor: &quot;white&quot;, alignItems: &quot;center&quot; }}
        &gt;
          &lt;ProgressSteps
            progressBarColor=&quot;red&quot;
            activeStepIconBorderColor=&quot;red&quot;
            completedProgressBarColor=&quot;red&quot;
            completedStepIconColor=&quot;red&quot;
            activeLabelColor=&quot;red&quot;
          &gt;
            &lt;ProgressStep&gt;
              &lt;View/&gt;
            &lt;/ProgressStep&gt;
            &lt;ProgressStep&gt;
              &lt;View&gt;
              &lt;/View&gt;
            &lt;/ProgressStep&gt;
            &lt;ProgressStep&gt;
              &lt;View style={{ alignItems: &quot;center&quot; }}&gt;
   ====&gt;        &lt;RadioButtonRN
                  boxStyle={{
                    height: hp(&quot;6%&quot;),
                    width: wp(&quot;80%&quot;),
                  }}
                  activeColor=&quot;white&quot;
                  boxActiveBgColor=&quot;red&quot;
                  textColor=&quot;black&quot;
                  textStyle={{ fontWeight: &quot;bold&quot; }}
                  data={goal}
                  initial={selectedGoal}
                  selectedBtn={(e) =&gt; setSelectedGoal(e.id)}
                /&gt;
              &lt;/View&gt;
            &lt;/ProgressStep&gt;
            &lt;ProgressStep
              label=&quot;Details&quot;
              onSubmit={() =&gt; this.functionCombined()}
              nextBtnTextStyle={{ color: &quot;red&quot; }}
              previousBtnTextStyle={{ color: &quot;red&quot; }}
              finishBtnText=&quot;Finish&quot;
            &gt;
              {selectedGoal == 1 ? (
                &lt;View style={{ alignItems: &quot;center&quot; }}&gt;
                  &lt;Text style={{ color: &quot;red&quot;, fontSize: 15, top: hp(&quot;5%&quot;) }}&gt;
                    How much would you like to gain per week?
                  &lt;/Text&gt;
                  &lt;RadioButtonRN
                    style={{ top: hp(&quot;10%&quot;) }}
                    boxStyle={{
                      height: hp(&quot;6%&quot;),
                      width: wp(&quot;80%&quot;),
                    }}
                    activeColor=&quot;white&quot;
                    boxActiveBgColor=&quot;red&quot;
                    textColor=&quot;black&quot;
                    textStyle={{ fontWeight: &quot;bold&quot; }}
                    data={details}
                    selectedBtn={(e) =&gt; console.log(e)}
                  /&gt;
                &lt;/View&gt;
              ) : selectedGoal == 2 ? (
                &lt;View&gt;
                  &lt;Text&gt;Ciao&lt;/Text&gt;
                &lt;/View&gt;
              ) : (
                &lt;View&gt;
                  &lt;Text&gt; you made it&lt;/Text&gt;
                &lt;/View&gt;
  ====&gt;         )}
            &lt;/ProgressStep&gt;
          &lt;/ProgressSteps&gt;
        &lt;/SafeAreaView&gt;
      );
    }
  }
  export default Register;
  </code></pre>
  <p>Hey everyone, I'm trying to convert a function component to a class component in order to work with this progress step registration page and radio buttons, the idea is to have a radio button, and depending on the result of that radio button, to show a different View component with another radio button</p>