React Native JS: Expected a component class, got [object Object]

Question

I have an error and really don't know why. It's a verry simple code juste for test react native, wanted to create a class who call an other class with and une a button to increment quantity :

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  TouchableHighlight,
  Text,
  View
} from 'react-native';

export default class Apprentissage1 extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcolm bitch
        </Text>
        <Product name="Product 1"/>
        <Product name="Product 2"/>
      </View>
    );
  }
}

class Product extends Component {

    constructor(props) {                                //Constructeur
        super(props);
        this.state = {
            quantity: 0
        };
    }


  addToCart(){
    this.setState({
      quantity: this.state.quantity + 1
    })
  }
  render(){
    return(
        <View style={styles.container}>
          <h2>{this.props.name}</h2>
          <p>Quantity: {this.state.quantity}</p>
            <TouchableHighlight onPress={this.addToCart.bind(this)}>
          Add To cart
          </TouchableHighlight>
        </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

AppRegistry.registerComponent('Apprentissage1', () => Apprentissage1);

Thank's for your help :)

You cant render HTML in a react-native app without using the WebView component... This error is related to the render function in your Product component — Maxwelll
– Maxwelll, Commented Feb 28, 2017 at 23:03
try removing export default from export default class Apprentissage1 extends Component { and replace html components with react native components such as <Text> — Pramendra Gupta
– Pramendra Gupta, Commented Mar 1, 2017 at 3:23

Ardalan Naghshineh · Accepted Answer · 2017-02-28 22:26:43Z

2

Replace your <h2> and <p> tags with React Native <View> component.

You cannot use DOM elements in your React Native application.

answered Feb 28, 2017 at 22:26

Ardalan Naghshineh

311 silver badge3 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

TheJizel Over a year ago

Good catch. That would definitely cause a problem as well.

BlackStef Over a year ago

Thank, it work ! I already had an other error whith the <TouchableHighlight> element which must have a child element (I haded <Text> inside)

Damathryx · Accepted Answer · 2017-03-01 19:02:07Z

1

That's because you are using a non components elements like h2, p which are html elements and not react-native components. Correct component to use for this is Text then use Text for both h2 and p. just manipulate its fontSize to suit your needs.

<Text style={{ fontSize: 18 }}>{this.props.name}</Text>
<Text style={{ fontSize: 12}}>Quantity: {this.state.quantity}</Text>

Also ToucheableHighlight should contain a single element not a string.

  <ToucheableHighlight
    onPress={this.addToCart.bind(this)}
  >
    <Text>
        Add to Cart
     </Text>
   </ToucheableHighlight>

edited Mar 1, 2017 at 19:02

answered Mar 1, 2017 at 1:46

Damathryx

2,8383 gold badges27 silver badges48 bronze badges

2 Comments

BlackStef Over a year ago

Thank, it work ! I already had an other error whith the <TouchableHighlight> element which must have a child element (I haded <Text> inside)

Damathryx Over a year ago

@BlackStef Great! Edited my answer to include that if someone needs it.

TheJizel · Accepted Answer · 2017-02-28 21:01:27Z

0

I'm not sure where the error is getting triggered, but your onPress for the TouchableHighlight can just be () => { this.setState({quantity: this.state.quantity + 1}) } instead of this.bind.addToCart(this).

answered Feb 28, 2017 at 21:01

TheJizel

1,9301 gold badge17 silver badges14 bronze badges

Comments

Gergo Bogdan · Accepted Answer · 2017-02-28 22:17:12Z

-1

Separate the Product class to a new file then import it. React Native does not really like having multiple components in the same file.

Also how did you initialize the project? what is the error message?

answered Feb 28, 2017 at 22:17

Gergo Bogdan

1991 silver badge5 bronze badges

1 Comment

TheJizel Over a year ago

This is incorrect. React Native has no problem with having multiple components in the same file so long as there is only one default being exported.

Collectives™ on Stack Overflow

React Native JS: Expected a component class, got [object Object]

4 Answers 4

2 Comments

2 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related