CODEWITHSUNDEEP
javascriptreactjsreact-nativereduxreact-redux
Aryabhatt
Aryabhatt

Reputation: 657

react native + redux - Expected a component class, got [object Object]

I am getting started with building react native apps (with redux). I was following examples from different blogs and was able to put together a simple app with a login page to get started. However I am getting, expected a component class, got [object Object] error. Would appreciate if someone can point out what is wrong in my code.

demoApp/index.ios.js

import React, { AppRegistry } from 'react-native';
import DemoApp from './app/';

AppRegistry.registerComponent('demoApp', () => DemoApp);

demoApp/app/index.js

import React, { Component } from 'react';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import App from './containers/App';
import rootReducer from './reducers/rootReducer';

const store = createStore(rootReducer);

export default class DemoApp extends Component {
  constructor(props) {
    super(props);
  };

  render () {
    return (
      <Provider store = { store }>
        <App />
      </Provider>
    );
  };
};

demoApp/app/containers/App.js

import React, { Component } from 'react';
import { connect } from 'react-redux';
import {
  View,
} from 'react-native';
import Login from '../containers/Login';

export class App extends Component {
  componentWillMount() {
    // this is the first point of control after launch
  };

  render() {
    if (this.props.signedIn) {
      return <Login />
    } else {
      return <Login />
    }
  };
};

const mapStateToProps = (state) => {
  return {
    signedIn: false;
  }
}

export default connect(mapStateToProps)(App);

demoApp/app/containers/Login/index.js

// Container for Login Component
import React from 'react';
import { connect } from 'react-redux';
import Login from './Login';

const mapStateToProps = (state) => {
  return {
    isLoggedIn: false,
  };
};

export default connect(mapStateToProps)(Login);

demoApp/app/containers/Login/Login.js

import React, { Component } from 'react';
import {
  View,
  Text
} from 'react-native';
import styles from './styles';
import images from '../../config/images';

export default class Login extends Component {
  constructor(props) {
    super(props);
  };

  render() {
    return (
      <View style = { styles.container }>
        if (this.props.isLoggedIn) {
          <Text style = { styles.welcome }>
            Welcome to Demo App!
          </Text>
        } else {
          <img style = { styles.logoImage } src = { images.logo } alt = "Demo App Logo" />
        }
      </View>
    );
  };
};

Thank you in advance.

Upvotes: 1

Views: 564

Answers (1)

Bruno Grieder
Bruno Grieder

Reputation: 29814

In Login.js, the return statement is wrong; you cannot mix JSX and Javascript this way. Javascript must be inlined within curly brackets.

Something like this would be better

const comp =  this.props.isLoggedIn ? 
    <Text style = { styles.welcome }>
        Welcome to Demo App!
    </Text>
    :
    <img style = { styles.logoImage } src = { images.logo } alt = "Demo App Logo" />


return (
  <View style = { styles.container }>
    {comp}
  </View>
);

Upvotes: 3

Related Questions