Hieu Bui Hieu Bui - 2 months ago 24
React JSX Question

Redux-React: Authentication - render is not defined

Sorry but i'm newbie redux and react

I have some code follow example on stackoverflow, and generate error, but i don't know fixing, somebody help me

actions/login.js

export const LOGIN = 'LOGIN';
export const LOGOUT = 'LOGOUT';

export function login(login, password) {
return {
type: LOGIN,
login,
password
}
}


components/LoginForm.js

import { Component, PropTypes } from 'react'

class LoginForm extends Component {
render () {
console.log("LoginForm")
return (
<div>
<form action="#" onSubmit={(e) => this.handleSubmit(e)}>
<input type="text" ref={node => { this.login = node }} />
<input type="password" ref={node => { this.password = node }} />
<input type="submit" value="Login" />
</form>
</div>
)
}

handleSubmit(e) {
e.preventDefault();
this.props.onSubmit(this.login.value, this.password.value);
}
}

LoginForm.propTypes = {
onSubmit: PropTypes.func.isRequired
};

export default LoginForm;


containers/App.js

import { Component } from 'react'
import { connect } from 'react-redux'
import { login } from '../actions/login'
import LoginForm from '../components/LoginForm'

class App extends Component {
render () {

const { dispatch } = this.props;

return (
<div>
<LoginForm onSubmit={(id, pass) => dispatch(login(id, pass))} />
</div>
)
}
}

const mapStateToProps = (state) => {
return {}
};
const mapDispatchToProps = (dispatch) => {
return {}
};
export default connect(mapStateToProps, mapDispatchToProps)(App);


Reducers/rootReducer.js

import { combineReducers } from 'redux'
import { LOGIN, LOGOUT } from '../actions/login'

const initialState = {
cid: null,
username: '',
logo: ''
};

const userLogin = (state = initialState, action) => {

switch (action.type) {
case LOGIN:

console.log("login");

return state;

case LOGOUT:
//...
return state;

default:
console.log("default");
return state;
}
};

const rootReducer = combineReducers({
userLogin
});

export default rootReducer;


index.js

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

let storelogin = createStore(rootReducer);
let rootElement2 = document.getElementById('root');
console.log("index");
ReactDOM.render(
<Provider store={storelogin}>
<App />
</Provider>,
rootElement2
);


index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Soundcloud Client</title>
</head>
<body>
<div id="app"></div>
<div id="counter"></div>
<div id="root"></div>
<div id="hellouni"></div>
</body>
</html>


When build OK, but run localhost:8080 then i get error:
Uncaught ReferenceError: render is not defined

Anybody help me ?

Answer

You should be importing React itself too.

import React, { Component } from 'react'