How can I convert this Class component function into functional component in React Native

ABDULLAH 0
Viewed 38

I am very new on React Native , I don't know how to change these type class functions , i am working on functional component that's why i need to change this into functional.

state = {
    selectedIndex: 0,
    radioButtonValue: 'asc',
  };

  onPress = (index) => {
    this.setState({
      selectedIndex: index,
    });
  };

  onRadiochange = (index, value) => {
    this.setState({
      radioButtonValue: value,
      selectedIndex: index,
    });
  };

error in code can't find variable onPress

code for style

 <RadioButton.Group onValueChange={(value) =>
                                onRadiochange(index, value)
                            }>
                                <View style={styles.singleRadioButtonContainer}>
                                    <Text>Yes</Text>
                                    <RadioButton
                                        color="#5d86d7"
                                        value="1"
                                        status={
                                            state.selectedIndex === index &&
                                                state.radioButtonValue === '1'
                                                ? 'checked'
                                                : 'unchecked'
                                        }
                                        onPress={() => {onPress(index)}}
                                    />
                                </View>
react-functional-component react-hooks react-native reactjs javascript
1 Answers

Like this

const  [selectedIndex,setSelectedIndex] = React.useState(0)
const  [radioButtonValue,setRadioButtonValue ] = React.useState('asc') 


const  onPress = (index) => {
   setSelectedIndex(index)

 };

const onRadiochange = (index, value) => {
   setSelectedIndex(index)
   setRadioButtonValue(value)
};


<RadioButton.Group onValueChange={(value) =>
                            onRadiochange(index, value)
                        }>
                            <View style={styles.singleRadioButtonContainer}>
                                <Text>Yes</Text>
                                <RadioButton
                                    color="#5d86d7"
                                    value="1"
                                    status={
                                        selectedIndex === index &&
                                            radioButtonValue === '1'
                                            ? 'checked'
                                            : 'unchecked'
                                    }
                                    onPress={() => onPress(index)}
                                />
                            </View>
AbdulAzeem0
Related