CODEWITHSUNDEEP
reactjsreact-nativereact-hooks
user13132748
user13132748

Reputation:

Invalid Hook Call, conversion from function to class

export class Register extends Component {
 render() {
    const [selectedGoal, setSelectedGoal] = React.useState(1);
 return (

<RadioButtonRN
                boxStyle={{
                  height: hp("6%"),
                  width: wp("80%"),
                }}
                activeColor="white"
                boxActiveBgColor="red"
                textColor="black"
                textStyle={{ fontWeight: "bold" }}
                data={goal}
                initial={selectedGoal}
                selectedBtn={(e) => setSelectedGoal(e.id)}
              />
{selectedGoal == 1 ? (
              <View style={{ alignItems: "center" }}>
                <Text style={{ color: "red", fontSize: 15, top: hp("5%") }}>
                  How much would you like to gain per week?
                </Text>
                <RadioButtonRN
                  style={{ top: hp("10%") }}
                  boxStyle={{
                    height: hp("6%"),
                    width: wp("80%"),
                  }}
                  activeColor="white"
                  boxActiveBgColor="red"
                  textColor="black"
                  textStyle={{ fontWeight: "bold" }}
                  data={details}
                  selectedBtn={(e) => console.log(e)}
                />
              </View>
            ) : selectedGoal == 2 ? (
              <View>
                <Text>Ciao</Text>
              </View>
            ) : (
              <View>
                <Text> you made it</Text>
              </View>
            )})}

Hello everyone, I'm new to programming, and I tried using the const under render() for then use it in the RadioButtonRN but of course, it gives me an Invalid Hook Call, how can I convert it to work in my class instead?

Upvotes: 1

Views: 114

Answers (3)

Ali Khoshgoftar
Ali Khoshgoftar

Reputation: 101

I can see 2 problems

1- When component return multiple elements should use fragments for example use

<React.Fragment></React.Fragment>

OR

<></>

Read more on the below link:

https://reactjs.org/docs/fragments.html

2- you can use react hook only on the functional components!

change your code to :

import React from "react";
export const Register = () => {
  const [selectedGoal, setSelectedGoal] = React.useState(1);
  return (
    <>
      <RadioButtonRN
        boxStyle={{
          height: hp("6%"),
          width: wp("80%"),
        }}
        activeColor="white"
        boxActiveBgColor="red"
        textColor="black"
        textStyle={{ fontWeight: "bold" }}
        data={goal}
        initial={selectedGoal}
        selectedBtn={(e) => setSelectedGoal(e.id)}
      />
      {selectedGoal == 1 ? (
        <View style={{ alignItems: "center" }}>
          <Text style={{ color: "red", fontSize: 15, top: hp("5%") }}>
            How much would you like to gain per week?
          </Text>
          <RadioButtonRN
            style={{ top: hp("10%") }}
            boxStyle={{
              height: hp("6%"),
              width: wp("80%"),
            }}
            activeColor="white"
            boxActiveBgColor="red"
            textColor="black"
            textStyle={{ fontWeight: "bold" }}
            data={details}
            selectedBtn={(e) => console.log(e)}
          />
        </View>
      ) : selectedGoal == 2 ? (
        <View>
          <Text>Ciao</Text>
        </View>
      ) : (
        <View>
          <Text> you made it</Text>
        </View>
      )}
    </>
  );
};

Upvotes: 1

Wiktoor
Wiktoor

Reputation: 176

Don't use hooks with React classes. If You construct Your components with classes, then use state. Hooks are designed to be use in stateless components.

Look here: https://www.w3schools.com/react/react_state.asp

React class state:

class Someclass extends React.Component {
  constructor() {
    this.state = {
        state_one: 1,
        state_two: 'asd'
    };
  }
  render() {
    return (
      <div>
        {this.state.state_one} // <- usage
      </div>
    );
  }
}

Mind, that You can change this.state.some_state like this:

this.setState({some_state: 'new_state'})

// or with using previous state:

this.setState({some_state: this.state.some_state + 1})

!!! Watch out for {} in this.setState()

Upvotes: 0

rakesh shrestha
rakesh shrestha

Reputation: 1455

You are using class component with react hooks. Hooks only work on functional component but here you are using class. You can read more about it in the docs. Example of functional component

export default function Register() {
 const [selectedGoal, setSelectedGoal] = React.useState(1);

 return <div>{selectedGoal</div>
}

Upvotes: 0

Related Questions