expected a component class, got [object Object]

Question

I get an error with this code. However, changing to react-native's removes the error. Can you use div with react-native? If not, why is this error so obscure...?

var React = require('react');
var ReactNative = require('react-native');
var {
  StyleSheet,
  Text,
  View,
} = ReactNative;

let Auto = React.createClass({
  getInitialState: function() {
    return { value: 'Ma' }
  },
  render: function() {
    return (
      <div className="fuck-react">
        Blah blah blah
      </div>
    )
  }

});

In React-Native, View takes the place of Div so better use View! — Dlucidone
– Dlucidone, Commented Jul 7, 2016 at 6:14

Chiranjhivi Ghimire · Accepted Answer · 2016-07-07 05:57:31Z

28

No you cannot use div tag in react-native. Since, react-native is based on JSX syntax which are automatically dispatched to native components by abstract Dom parser. you can get your answer here:https://facebook.github.io/react-native/docs/tutorial.html

Also, react-native is upadated to new version that is 0.29 , you probably should ignore old ECMA script and use new ECMA script for javascript syntax. Since, react-native uses reactjs for its javascript so better learn from here: http://reactjs.net/guides/es6.html

edited Jul 7, 2016 at 5:57

answered Jul 7, 2016 at 5:41

Chiranjhivi Ghimire

1,7291 gold badge19 silver badges22 bronze badges

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

3 Comments

Riten Over a year ago

there is newer version available for react-native : 0.29 .Check here: upgrade to latest

Drew Over a year ago

Thanks for the explanation. Does packer automatically find files with extension jsx? What's the version have to do with this question? Does 0.29 provide better errors?

Chiranjhivi Ghimire Over a year ago

React-native application is mainly based on syntax, so with the upgrading in react-native version the change in syntax is priotrized. So, we should adapt the change of JSX syntax while developing application.

Jagadish Upadhyay · Accepted Answer · 2016-07-07 08:13:55Z

6

Instead of DIV use View.

<View style={{flex: 1}}>
       <Text>Blah blah blah</Text>
</View>

answered Jul 7, 2016 at 8:13

Jagadish Upadhyay

1,27413 silver badges22 bronze badges

Comments

llioor · Accepted Answer · 2017-04-12 07:37:29Z

1

You can not use in react native. Use native component instead.

<View>
  <Text>text text text</Text>
</View>

Do not forget to import before with:

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

answered Apr 12, 2017 at 7:37

llioor

6,3084 gold badges40 silver badges46 bronze badges

Comments

Hitesh Sahu · Accepted Answer · 2017-09-14 06:53:48Z

0

You may be using ReactJS component in a React Native App. I accidentally installed a component with <div> tags in React Native project.

answered Sep 14, 2017 at 6:53

Hitesh Sahu

45.6k18 gold badges217 silver badges160 bronze badges

Collectives™ on Stack Overflow

expected a component class, got [object Object]

4 Answers 4

3 Comments

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

Comments

Related