I try to implement for the first time Redux on my React-Native app. I have the error Can’t find variable: render
On my index.js, I call a Provider in order to use Redux. So I add a render it and it triggers this error.
Here is my index.js file:
//index.js
import React from "react";
import {AppRegistry} from 'react-native';
import App from './App';
import { Provider } from 'react-redux'
import Store from './redux/Store/store'
import {name as appName} from './app.json';
AppRegistry.registerComponent(appName, () => App);
render( <Provider store={Store}> <App/> </Provider>, document.getElementById('root')
)And if useful, App Component that is called:
import firebase from '@firebase/app'
import '@firebase/auth'
import React from 'react';
import { View, Text, Button, Image, TouchableOpacity, StyleSheet } from 'react-native';
import { createStackNavigator, StackActions, NavigationActions } from 'react-navigation'; // Version can be specified in package.json
import Listing from './Listing';
import Menu from './Menu';
import Login from './Login';
import TestRedux from './redux/Components/TestRedux';
firebase.initializeApp({ apiKey: "XXXXXXX", authDomain: "XXXXXXX", databaseURL: "XXXXXXX", projectId: "XXXXXXX", storageBucket: "XXXXXXX", messagingSenderId: "XXXXXXX"
});
export class App extends React.Component { constructor(props){ super(props); this.state = { user:'', loggedAndVerifiedOrNot: false } firebase.auth().onAuthStateChanged((user) => { //this.setState({ user: user }) if (user != null) { if (user.emailVerified!=null) { if (user.emailVerified == true) this.setState({loggedAndVerifiedOrNot: true}) } } }); } render(){ if (this.state.loggedAndVerifiedOrNot) { this.props.navigation.navigate('Menu'); } else { this.props.navigation.navigate('Login'); } return (null) }
}
export default createStackNavigator({ Home: { screen: App, }, Login: { screen: Login, }, Menu: { screen: Menu, }, Listing: { screen: Listing, }, TestRedux: { screen: TestRedux, }, }, { initialRouteName: 'Home', }
);Do you know where this error comes from and how to solve it ?
1 Answer
The syntax is:
render() { return ( ... somethingToRender ... )
}and this
render() { return ( <Provider store={Store}> <App/> </Provider>, ) }needs to be inside of your App component and removed from index.js.
You don't need document.getElementById. App is essentially your root element
2
