Props are undefined on React initialization. Why?

Question

I am creating a VR application with React 360. What I am trying to do is to eventually create an application as shown here Facebook VR multi surface example. I am taking the code for that example and am trying to fit it into my application. However I'm having a problem with the following initialization of my React components.

I have the following react-360 application with the following code index.js

import React from 'react';
import connect from './Store';

import {
  asset,
  AppRegistry,
  StyleSheet,
  Text,
  View,
  VrButton,
} from 'react-360';

import Entity from 'Entity';


const ModelView = props => {

  *********** Problem **************
  Why are my props undefined if I am declaring it in the wrapper?
  **********************************

  return (
    <Entity
      style={{transform: [{scaleX: 1.25}, {scaleY: 1.25}]}}
      source={{obj: asset(`${props.planetName}.obj`), mtl: asset(`${props.planetName}.mtl`)}}
    />
  );
};

const ConnectedModelView = connect(ModelView);
export default ConnectedModelView;

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

From the code above, my props for the ModelView should not be undefined. On initialization, it should have the value of earth.

The props are supposed to be initialized in Store.js. Here is the code below:

import React from 'react';

const State = {
  planetName: 'earth'
};

const listeners = new Set();

export default function connect(Component) {
  return class Wrapper extends React.Component {
    state = {
      planetName: State.planetName
    };

    _listener = () => {
      this.setState({
        planetName: State.planetName
      });
    };

    componentDidMount() {
      listeners.add(this._listener);
    }

    componentWillUnmount() {
      listeners.delete(this._listener);
    }

    render() {
      return (
        <Component
          {...this.props}
          planetName={this.state.planetName}
        />
      );
    }
  };
}

Taking a page from the facebook code, what I am doing is initializing model view via Store.connect method. This method creates a wrapper around ModelView where I am setting the props via State.planetName. However, I keep getting undefined and I don't know why. I've hardcoded every part of the code which has State.planetName to the value of earth and it still is undefined. The props are not being set to the value I want and I'm not sure why. Can someone out there assist me with why this might be the case? I would appreciate the help.

score 1 · Accepted Answer · answered Dec 21 '18 at 17:42

1

It looks like you're rendering the ModelView and not the ConnectedModelView.

answered Dec 21 '18 at 17:42

Colin Ricardo

16,488
11
47
80

thanks for your answer. I'll mark it correct in a bit as it worked but could you answer something for me. In the facebook code found here (https://github.com/facebook/react-360/tree/master/Samples/MultiRoot) in the `TopPosts.js` file, I am more or less following the same pattern but nowhere in that code is `ConnectedTopPosts` being imported. How is it able to work then? I don't how versed you are in `react-360` but if you have any insight, I'd like to know. Thanks. – Dan Rubio Dec 21 '18 at 17:49
@DanRubio ... It's not being imported, it's being created and *exported*. It's imported in `index.js` -- `import TopPosts from './TopPosts'` – Dave Newton Dec 21 '18 at 18:18
Ok, it looks I'm going to need to read up on `import/export` for ES6, I would have thought that it would be `import ConnectedTopPosts from './TopPosts'` because I had to change `AppRegistry.registerComponent('ModelView', () => ModelView);` to `AppRegistry.registerComponent('ConnectedModelView', () => ConnectedModelView);` Thanks. – Dan Rubio Dec 21 '18 at 18:24

Props are undefined on React initialization. Why?

1 Answers1