javascript - React & Redux : connect() to multiple components & best practices -

i'm working on first react/redux project , have little question. i've read documentation , watched tutorials available @ https://egghead.io/lessons/javascript-redux-generating-containers-with-connect-from-react-redux-visibletodolist.

but still have 1 question. it's login page. have presentational component named loginform :

components/loginform.js

import { component, proptypes } 'react'  class loginform extends component {    render () {       return (          <div>             <form action="#" onsubmitlogin={(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.onsubmitlogin(this.login.value, this.password.value);    } }  loginform.proptypes = {    onsubmitlogin: proptypes.func.isrequired };  export default loginform; 

and container component named login pass data component. using react-redux-router, call container (and not presentationnal component) :

containers/login.js

import { connect } 'react-redux' import { login } '../actions/creators/useractioncreators' import loginform '../components/loginform'  const mapdispatchtoprops = (dispatch) => {    return {       onsubmitlogin: (id, pass) => dispatch(login(id, pass))    } };  export default connect(null, mapdispatchtoprops)(loginform); 

as can see, i'm using connect method provide redux create container.

my question following 1 :

if want login container use multiple views (for example : loginform , errorlist display errors), need hand (without connect because connect take 1 argument). :

class login extends component {     render() {       return (          <div>             <errorlist />             <loginform onsubmitlogin={ (id, pass) => dispatch(login(id, pass)) } />          </div>       )    }  } 

is bad practice ? better create presentational component (loginpage) use both errorlist , loginform , create container (login) connect loginpage ?

---

edit: if create third presentational component (loginpage), i'll have pass data twice. : container -> loginpage -> loginform & errorlist. context, don't seems way go.

i think have in second example close. can create 1 container component that's connected , render multiple presentational components.

in first example, there isn't separate container component:

import { connect } 'react-redux' import { login } '../actions/creators/useractioncreators' import loginform '../components/loginform'  const mapdispatchtoprops = (dispatch) => {    return {       onsubmitlogin: (id, pass) => dispatch(login(id, pass))    } };  // `loginform` being passed, "container" // component in scenario export default connect(null, mapdispatchtoprops)(loginform); 

even though it's in separate module, you're doing here connecting loginform directly.

instead, can this:

containers/login.js

import { connect } 'react-redux' import { login } '../actions/creators/useractioncreators' import loginform '../components/loginform' import errorlist '../components/errorlist'  class login extends component {     render() {       const { onsubmitlogin, errors } = this.props;        return (          <div>             <errorlist errors={errors} />             <loginform onsubmitlogin={onsubmitlogin} />          </div>       )    }  }  const mapdispatchtoprops = (dispatch) => {    return {       onsubmitlogin: (id, pass) => dispatch(login(id, pass))    } };  const mapstatetoprops = (state) => {    return {        errors: state.errors    }; };  export default connect(mapstatetoprops, mapdispatchtoprops)(login); 

note login component being passed connect, making "container" component , both errorlist , loginform can presentational. of data can passed via props login container.