How to pass value to placeholder to textInput in redux-form?

Question

So I'm creating a login form with two fields, username & password respectively; and I would like to pass placeholder to each of these Field. however, no matter what I try, the placeholder is not shown.

Code

 const submit = values => { console.log('submitting form', values) }; const renderInput = ({ input: { onChange, ...restInput } }) => { return <TextInput style = { styles.input } onChangeText = { onChange } { ...restInput }/> }; const LoginForm = props => { const { handleSubmit } = props; return ( <View style={styles.container}> <View> <Field name="email" placeholder="Email" component={renderInput} /> <Field name="password" placeholder="Password" component={renderInput} /> </View> <View> <View style={styles.loginBtnContainer}> <TouchableOpacity style={styles.button} onPress={handleSubmit(submit)}> <Text style={{fontSize: 30, color: '#17a2e0'}}>Login</Text> </TouchableOpacity> </View> </View> </View> ) } export default reduxForm({ form: 'test' })(LoginForm) 

As you can see, the two fields with name email & password respectively are not present in TextInput in renderInput function.

Answer 1

In your component renderInput in its props you will have available the ones applied to the component Field . As documentation states, you just have to apply the attribute placeholder in the TextInput component to get placeholder rendered.

const renderInput = ({ placeholder, input: { onChange, ...restInput } }) => {
    return <TextInput placeholder={placeholder} style = { styles.input } onChangeText = { onChange } { ...restInput }/>
};