I am using Redux-form with a custom Radio Group and Button components. When i select a radio button, redux-logger seems to show that the state is updated with the correct values. However checked always returns false, and so the radio button style never gets updated.
console.log(value) returns the correct value
console.log(onChange(value) always returns undefined
console.log(checked) always returns false
RadioGroup.js
import React from 'react';
import PropTypes from 'prop-types';
import { View, Text, StyleSheet } from 'react-native';
import RadioButton from '../components/RadioButton';
import { COLOR_PRIMARY } from '../constants';
const styles = StyleSheet.create({
errorStyle: {
color: COLOR_PRIMARY,
},
});
const RadioGroup = (props) => {
const { radios, input: { value, onChange }, meta: { touched, error } } = props;
return (
<View>
{radios.map(radio => (
<RadioButton
key={radio.label}
{...radio}
onChange={onChange}
checked={radio.value === value}
/>
))}
{touched &&
(error && (
<View>
<Text style={styles.errorStyle}>{error}</Text>
</View>
))}
</View>
);
};
RadioGroup.propTypes = {
radios: PropTypes.arrayOf(
PropTypes.shape({
label: PropTypes.string.isRequired,
value: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]).isRequired,
}),
).isRequired,
meta: PropTypes.shape({
touched: PropTypes.bool.isRequired,
error: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
}).isRequired,
input: PropTypes.shape({
value: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]).isRequired,
onChange: PropTypes.func.isRequired,
}).isRequired,
};
export default RadioGroup;
RadioButton.js
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { TouchableOpacity, View, Text, StyleSheet } from 'react-native';
import { COLOR_PRIMARY, TEXT_PRIMARY } from '../constants';
const styles = StyleSheet.create({
container: {
marginBottom: 20,
flexDirection: 'row',
alignItems: 'center',
},
circle: {
height: 24,
width: 24,
borderRadius: 12,
borderWidth: 2,
borderColor: COLOR_PRIMARY,
alignItems: 'center',
justifyContent: 'center',
},
circleFilled: {
height: 14,
width: 14,
borderRadius: 7,
backgroundColor: COLOR_PRIMARY,
},
labelStyle: {
color: TEXT_PRIMARY,
marginLeft: 10,
marginRight: 10,
},
});
export default class RadioButton extends Component {
handlePress = () => {
const { value, onChange, checked } = this.props;
onChange(value);
console.log(onChange(value));
console.log(value);
console.log(checked);
};
render() {
const { checked, label } = this.props;
return (
<View style={styles.container}>
<TouchableOpacity onPress={this.handlePress} style={styles.radioStyle}>
<View style={styles.circle}>
<View style={checked ? styles.circleFilled : null} />
</View>
</TouchableOpacity>
<Text style={styles.labelStyle}>{label}</Text>
</View>
);
}
}
RadioButton.propTypes = {
checked: PropTypes.bool.isRequired,
label: PropTypes.string.isRequired,
value: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]).isRequired,
onChange: PropTypes.func.isRequired,
};
Form.js
<Field
name="sex"
radios={[{ label: 'Male', value: 'Male' }, { label: 'Female', value: 'Female' }]}
component={RadioGroup}
/>
So is there some problem with how i am using onChange?