Failed prop type: Invalid prop 'value'

0
votes

Whenever I try o type into the TextInput I keep getting this warning: failed prop type invalid prop 'value' of type 'object' supplied to 'textinput' expected 'string'

LoginForm.js

import React, { Component } from 'react';
import { Card, CardSection, Button, Input } from './common';

class LoginForm extends Component {

    state = { email: '', password: '', error: '' };

    render() {
        return (
            <Card>
                <CardSection>
                    <Input 
                    label='Email'
                    placeholder='[email protected]'
                    value={this.state.email}
                    onChangeText={(email) => this.setState({ email: email } )}
                    />
                </CardSection>

Input.js

import React from 'react';
import { TextInput, View, Text } from 'react-native';

const Input = ({ label, value, onChangeText, placeholder, secureTextEntry }) => {
    return (
        <View style={styles.containerStyle}>
            <Text style={styles.labelStyle}>{ label }</Text>
                <TextInput
                secureTextEntry={secureTextEntry}
                placeholder={placeholder}
                style={styles.inputStyle}
                value={value}
                onChange={onChangeText}
                autoCorrect={false}
                />
        </View>
    );
};

Could you please help me to find the problem?

3
react-native

3 Answers

2
votes

The event listener you need to bind is onChangeText

onChangeText expects a string param ... where onChange expects an object of this form: nativeEvent: { eventCount, target, text} ... that's why you're getting this error...

<Text style={styles.labelStyle}>{ label }</Text>
                <TextInput
                secureTextEntry={secureTextEntry}
                placeholder={placeholder}
                style={styles.inputStyle}
                value={value}
                onChangeText={onChangeText} // <--Look at this
                autoCorrect={false}
                />
1
votes
onChange={(e) => onChangeText(e.text)}

or

onChangeText={onChangeText}
1
votes

The error you mentioned or Warning: Failed prop type: Invalid prop value of type number supplied to TextInput, expected string appears when you try to input value of type number instead of string.

To avoid the error and to follow the best practice for react-native is to wrap the input value with String() function like this:

<TextInput
  value={String(this.props.value)}
  onChange = {this.props.onChange}
  placeholder={"جستجو"}
  blurOnSubmit={false}
  style={{flex:0.9}}
  returnKeyType="done"
/>