I am trying to get input in one field and display it, but that throws a warning. I am able to see the info on the Text Field as I change the Input.

However, how do I get rid of the following warning?

Warning: Functions are not valid as a React child. This may happen if you return a Component instead of from render. Or maybe you meant to call this function rather than return it.%s,

My code is as follows:

class LoginUser extends Component{
    constructor(props){
        super(props);
        this.state ={phoneNo:String};
        this.updatePh = this.updatePhoneNo.bind(this);
    }
    updatePhoneNo(value){
        this.setState({
            phoneNo:value
        })
    }
    render(){
        return(
            <View style={{flex:1,alignItems:'center',justifyContent:'center'}}>
                <TextInput value={this.state.phoneNo} placeholder="Mobile Number" keyboardType="numeric" 
                            onChangeText={(val) =>{this.updatePhoneNo(val)}} returnKeyType ='go'></TextInput>
                <Text>Phone number value :{this.state.phoneNo}</Text>
            </View>
            
        );
    }
}

I tried creating another component just for displaying the data. However, I am still getting the same warning.

class PhoneText extends Component{
    render(){
        return(
            <Text>The Value is {this.props.phoneNumber}</Text>
        );
    }
}

<PhoneText phoneNumber={this.state.phoneNo}></PhoneText>

CodePudding user response：

change this constructor, remove String to empty strings ""

constructor(props){
        super(props);
        this.state ={phoneNo:""};
        this.updatePh = this.updatePhoneNo.bind(this);
    }

Hope it helps, feel free for doubts