edit screen fields not populating in react-native - react-native

Question

I try to open an edit screen for relevant record when user taps the row in the list. I see at debugger all of the props are passing successfully but somehow I cant show them on the screen. I searched a lot and I think the main problem is at onRowPress helper. When I press the row, I see in the debugger all the props have passed correctly. But there is an error that says
Failed prop type: Invalid prop value of type array supplied to
TextInput, expected string.
My question is how should I handle this error.
console.log
onRowPress() {
console.log(this.props.employee);
Actions.employeeEdit({ employee: this.props.employee });
}

Answer 1

I guess you are on "The Complete React Native and Redux Course", if so, i thing you missed:
-1 import Communications from "react-native-communications";
-2
class EmployeeEdit extends Component {
state = { showModal: false };
...
3- Above your render():
onTextPress() {
const { phone, shift } = this.props;
Communications.text(phone, `Your upcoming shift is on ${shift}`);
}
onAccept() {
const { uid } = this.props.employee;
this.props.employeeDelete({ uid });
}
onDecline() {
this.setState({ showModal: false });
}
-4 And finally, your main render() should be:
<Card>
<EmployeeForm />
<CardSection>
<Button onPress={this.onButtonPress.bind(this)}>Save Changes</Button>
</CardSection>
<CardSection>
<Button onPress={this.onTextPress.bind(this)}>Text Schedule</Button>
</CardSection>
<CardSection>
<Button onPress={() => this.setState({ showModal: !this.state.showModal })}>
Fire Employee
</Button>
</CardSection>
<Confirm
visible={this.state.showModal}
onAccept={this.onAccept.bind(this)}
onDecline={this.onDecline.bind(this)}
>
Are you sure you want to delete this?
</Confirm>
</Card>;

Answer 2

It takes time but I solved the problem. Main problem was the error below;
Failed prop type: Invalid prop value of type array supplied to
TextInput, expected string.
I followed all the code step to step and find that the reducer which update the props with the values I pass can't do this. I added a toString() method to the actions.payload.value and everything is ok. You have to pass a string to the Input component.
export default (state = INITIAL_STATE, action) => {
switch (action.type) {
case EMPLOYEE_UPDATE:
return { ...state, [action.payload.prop]: action.payload.value.toString() };
case EMPLOYEE_CREATE:
return INITIAL_STATE;
case EMPLOYEE_SAVE_SUCCESS:
return INITIAL_STATE;
default:
return state;
}
};