CODEWITHSUNDEEP
javascriptreactjsreact-nativereact-native-ios
blue
blue

Reputation: 7395

React native: Component not defined? Can't import?

Ok, very new to react native here and Im trying to very simply import another .js file and have that be run in the main render() func in index.ios.js

I have looked everywhere and tried both import and require to do this, however I am stuck with error:

Component is not defined

Here is what I have, the error is thrown at just the addition of the import line:

import React, { Component } from 'react';
import { Button, Card } from 'react-native-material-design';
import {
  StyleSheet,
  Text,
  View,
  Animated,
  Easing,
  ScrollView,
  RefreshControl,
  AppRegistry
} from 'react-native';
//import { Container, Content } from 'native-base';

import TestClass from "./TestClass";
//var animation = require('./TestClass');

//BODY
export default class SkysReact extends Component {


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

    // return (<View style={styles.container}>
    // {this.test()}
    // </View>);
  }
  test() {
  console.log("Hello World")
}

animate()
{
  console.log("animate");
}
}

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

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

And my other class:

import React from 'react';
import Animation from 'lottie-react-native';
import {
  StyleSheet,
  Text,
  View,
  Animated,
  Easing,
  ScrollView,
  RefreshControl,
  AppRegistry
} from 'react-native';

export default class TestClass extends Component { // not defined error here

    render() {
      return (<View style={styles.container}>
      {this.test()}
      </View>);
    }
    test() {
    console.log("Hello World 2222")
  }
}
module.exports = TestClass;

How can I just display TestClass in my index.ios.js? What is wrong?

Upvotes: 8

Views: 13610

Answers (2)

Dan Zuzevich
Dan Zuzevich

Reputation: 3831

Ah hah. I know exactly what it is. Compare the very top line of your TestClass file with mine below. You will see the difference. Fix this, and your done.

import React, {Component} from 'react';
import Animation from 'lottie-react-native';
import {
  StyleSheet,
  Text,
  View,
  Animated,
  Easing,
  ScrollView,
  RefreshControl,
  AppRegistry
} from 'react-native';
export default class TestClass extends Component {

    render() {
      return (<View style={styles.container}>
      {this.test()}
      </View>);
    }
    test() {
    console.log("Hello World 2222")
  }
}

You were missing the, {Component} in your import statement. I also took our your module.exports statement, its unnecessary.

Upvotes: 11

jered
jered

Reputation: 11591

this.test() is not a valid child of your <View> in TestClass because it is not a valid React Component, nor does it return one.

If you want to "test" that your TestClass.render() function is running, put the console.log() above your return statement, like this:

render() {
  this.test();
  return (
    <View style={styles.container}></View>
  );
}

Of course, you won't actually see anything because TestClass doesn't have any children.

Upvotes: -2

Related Questions