Objects are not valid as React-Child > use an array instead exception

Question

I recently started to learn React-Native and I'm trying to create an authorization application right now. But when I tried to create a login form component I got an error like: "Objects are not valid as a React Child..."

Here is my complete .js file:

import React, {Component} from 'react';
import {View, TextInput} from 'react-native';
import Button from './common/Button';

class LoginForm extends Component {
  constructor(props) {
    super(props);
    this.state = {email: '', password: ''};
  }
  render() {
    const {containerStyle, subContainerStyle, inputStyle} = styles;
    return (
      <View style={containerStyle}>
        <View style={subContainerStyle}>
          <TextInput>
            placeholder="Email" style = {inputStyle}
            value = {this.state.email}
            onChangeText= {(email) => this.setState(email)}
          </TextInput>
        </View>
        <View style={subContainerStyle}>
          <TextInput>
            placeholder="Email" style = {inputStyle}
            value = {this.state.password}
            onChangeText= {(password) => this.setState(password)}
          </TextInput>
        </View>
        <View style={subContainerStyle}>
          <Button onPress={() => console.log('pressed')}>Login</Button>
        </View>
      </View>
    );
  }
}

const styles = {
  containerStyle: {
    borderWidth: 1,
    borderRadius: 2,
    borderColor: '#ddd',
    borderBottomWidth: 0,
    shadowColor: '#000',
    shadowOffset: {width: 0, height: 2},
    shadowOpacity: 0.1,
    shadowRadius: 2,
    elevation: 1,
    marginLeft: 5,
    marginRight: 5,
    marginTop: 10,
  },
  subContainerStyle: {
    borderBottomWidth: 1,
    padding: 5,
    backgroundColor: '#fff',
    justifyContent: 'flex-start',
    flexDirection: 'row',
    borderColor: '#ddd',
    position: 'relative',
  },
  inputStyle: {
    color: '#000',
    paddingRight: 5,
    paddingLeft: 5,
    fontSize: 18,
    lineHeight: 23,
    flex: 2,
  },
};

export default LoginForm;

I'm expecting to create a basic login page with user input email and password. But couldn't create it. I also import this form component which I showed you on top into my App.js just simple is that.

Vinay Singh · Accepted Answer · 2021-03-05 19:00:52Z

You should update render function like this.

render() {
    const {containerStyle, subContainerStyle, inputStyle} = styles;
    return (
      <View style={containerStyle}>
        <View style={subContainerStyle}>
          <TextInput
            placeholder="Email"
            style = {inputStyle}
            value = {this.state.email}
            onChangeText= {(email) => this.setState({ email })}
          />
        </View>
        <View style={subContainerStyle}>
          <TextInput
            placeholder="Password"
            style = {inputStyle}
            value = {this.state.password}
            onChangeText= {(password) => this.setState({password})}
          />
        </View>
        <View style={subContainerStyle}>
          <Button onPress={() => console.log('pressed')}>Login</Button>
        </View>
      </View>
    );
  }

Taha Ateş · Accepted Answer · 2021-03-05 14:43:28Z

0

Oh, after a few hours I found a solution which is a quite newbie mistake. Just pass all contents inside of <TextInput 'here' /> instead of 'here'

answered Mar 5, 2021 at 14:43

Taha Ateş

1411 gold badge3 silver badges14 bronze badges

2 Comments

Raju Gangadhar Over a year ago

and as pointed by Vinay Singh above, in setState function, the captured email or password should be set as an object key and not as a straight argument. Wrong: email => this.setState(email), right: (email) => this.setState({ email })

Taha Ateş Over a year ago

Thanks, while I was writing this sentence I got an error which you gave out the solution 4 hours ago. Thank you!

Collectives™ on Stack Overflow

Objects are not valid as React-Child > use an array instead exception

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related