how to properly export component containing multiple classes in react

Question

I'm actually working on a small react app, I actually want to connect my component to firebase, but this component contains multiple classes and multiple exports, so when i apply my method (which is based on one class component) it rendering me nothing, it supposed to returns data from firestore.

when i try to console log the state on mapStateToProps it returns undefined :

const mapStateToProps = (state) => {
   console.log("state firebase",state);
   return {
     animationsfb: state.firestore.ordered.animations,
   }
}

that's my component that contains multiple classes:

export class AnimationScreen extends Component {

  render() {
    return (
         <View>
          .........
         </View>
    );
  }
}

const mapStateToProps = (state) => {
    console.log("state firebase",state);
 return {
   animationsfb: state.firestore.ordered.animations,
 }
}

class DetailsScreen extends React.Component {

    render() {

        return (
           <View>
             .........
           </View>
        );
     }
}

const Navigator = FluidNavigator({

        home: {screen: AnimationScreen},
        homeDetails: {screen: DetailsScreen},
},
);

class HomeTransitions extends React.Component {
    static router = Navigator.router;


    render() {
        const {navigation} = this.props;

        return (
            <Navigator navigation={navigation}/>
        );
    }
}
// it was like this before i change it: **export default HomeTransitions**

export default compose(
    connect(mapStateToProps), firestoreConnect([{ collection: 'animations'}])
    ) (HomeTransitions);

I expect to return me data on state when i console log it, but it returns undefined.

Why not just separate out the classes to their own files and export them individually? — Jake Luby
– Jake Luby, Commented Jul 29, 2019 at 16:36

remeus · Accepted Answer · 2019-07-30 09:22:01Z

1

Currently you are trying to connect everything to the store, including the navigator, which is probably not what you want to do.

If you are just using animationsfb in AnimationScreen, just connect this component to the store and use the output as a screen in your navigator:

class AnimationScreen extends Component {
  render() {
    return (
      <View>
        // [...]
      </View>
    );
  }
}

const mapStateToProps = (state) => {
  console.log("state firebase", state);
  return {
    animationsfb: state.firestore.ordered.animations,
  }
}

const AnimationScreenConnected = connect(mapStateToProps)(AnimationScreen);

Then in your navigator:

const Navigator = FluidNavigator({
  home: { screen: AnimationScreenConnected },
  homeDetails: { screen: DetailsScreen },
});

answered Jul 30, 2019 at 9:22

remeus

2,4692 gold badges13 silver badges22 bronze badges

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

3 Comments

Soufien JAOUADI Over a year ago

That's actually right, now it returns the state of mapStateToProps, but the value animationsfb returns undefined !

remeus Over a year ago

this.props.animationsfb should be available in AnimationScreen, but there is probably a small delay during which it has not been fetched yet from the store. You can add a condition in your render function and displays a loading indicator if the value is not defined.

Soufien JAOUADI Over a year ago

thanks for replying, actually i figure out what i'm missing, i just need to connect my component to the firebase collection, so i add this :

const AnimationScreenConnected = compose(    connect(mapStateToProps),    firestoreConnect( [ { collection: 'animations'} ] ))(AnimationScreen);

Collectives™ on Stack Overflow

how to properly export component containing multiple classes in react

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related