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 :)

Answer 1

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

You cannot use DOM elements in your React Native application.

Answer 2

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>

Answer 3

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).

Answer 4

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?