Merge pull request #22770 from payal-lathidadiya/refactor/migrate-rad…

…iobuttons [NoQA] refactor: migrate RadioButtons to function component
Expensify · Jul 19, 2023 · ee2d4fd · ee2d4fd
2 parents 5419d9b + d78fdf3
commit ee2d4fd
Showing 1 changed file with 20 additions and 27 deletions.
diff --git a/src/components/RadioButtons.js b/src/components/RadioButtons.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useState} from 'react';
 import {View} from 'react-native';
 import PropTypes from 'prop-types';
 import _ from 'underscore';
@@ -18,35 +18,28 @@ const propTypes = {
     onPress: PropTypes.func.isRequired,
 };
 
-class RadioButtons extends React.Component {
-    constructor(props) {
-        super(props);
+function RadioButtons(props) {
+    const [checkedValue, setCheckedValue] = useState('');
 
-        this.state = {
-            checkedValue: '',
-        };
-    }
-
-    render() {
-        return (
-            <View>
-                {_.map(this.props.items, (item, index) => (
-                    <RadioButtonWithLabel
-                        key={`${item.label}-${index}`}
-                        isChecked={item.value === this.state.checkedValue}
-                        style={[styles.mt4]}
-                        onPress={() => {
-                            this.setState({checkedValue: item.value});
-                            return this.props.onPress(item.value);
-                        }}
-                        label={item.label}
-                    />
-                ))}
-            </View>
-        );
-    }
+    return (
+        <View>
+            {_.map(props.items, (item, index) => (
+                <RadioButtonWithLabel
+                    key={`${item.label}-${index}`}
+                    isChecked={item.value === checkedValue}
+                    style={[styles.mt4]}
+                    onPress={() => {
+                        setCheckedValue(item.value);
+                        return props.onPress(item.value);
+                    }}
+                    label={item.label}
+                />
+            ))}
+        </View>
+    );
 }
 
 RadioButtons.propTypes = propTypes;
+RadioButtons.displayName = 'RadioButtons';
 
 export default RadioButtons;