title: How to pass setState to another component
body: <p>I'm newbie in React I've built a simple app using Redux &amp; React. I'm just trying to setState in Action.js file and then use it in the component.</p>
  
  <p>The problem is I don't know how to deffiend <code>errors</code> argument to <code>catch setState</code> and I already deffiend it in the layout component like this </p>
  
  <pre><code>this.props.postUsers(this.state.username,this.state.password,this.state.errors)
  </code></pre>
  
  <p>I don't know if this the correct way to pass the setState to another component.</p>
  
  <blockquote>
    <p>Note: I'm using redux-promise-middleware it adds _PENDING &amp; _FULFILLED
    &amp; _REJECTED by it's own.</p>
  </blockquote>
  
  <p><strong>src/actions/userActions.js</strong></p>
  
  <pre><code>export function postUsers(username, password, errors) {
      let users = {
          username,
          password,
      };
      let self = this;
      return{
          type: "USERS_POST",
          payload: axios({
              method:'POST',
              url: url,
              data: users,
              contentType: 'application/json',
              headers: {
                  'Accept': 'application/json',
                  'Content-Type': 'application/json',
              }
          })
              .then(success =&gt; {
                  console.log('sucesssssssss', success)
              })
              .catch(({response}) =&gt; {
                 self.setState({errors: response.data});
              })
  
      }
  }
  </code></pre>
  
  <p><strong>src/components/layout.js</strong></p>
  
  <pre><code>import React, {Component} from 'react';
  import { connect } from 'react-redux';
  import {bindActionCreators} from 'redux';
  import { postUsers } from '../actions/usersAction';
  
  class Layout extends Component {
      constructor(props){
          super(props);
          this.state = {
              username: '',
              password: '',
              errors: [],
          }
      }
      onUserUpdate(filed, event){
          if (filed === 'username') {
              this.setState({
                  username: event.target.value
              });
          }
          if (filed ==='password') {
              this.setState({
                  password: event.target.value
              });
          }
      }
  
      handlePostUsers(e){
          e.preventDefault();
          this.props.postUsers(this.state.username,this.state.password,this.state.errors)
      }
      render() {
          console.log('this.state.errors',this.state.errors);
          return (
              &lt;div className="App"&gt;
                  &lt;input name="username" onChange={this.onUserUpdate.bind(this, 'username')}/&gt;
                  &lt;input name="username" onChange={this.onUserUpdate.bind(this, 'password')}/&gt;
                  &lt;button onClick={(e) =&gt; this.handlePostUsers(e)}&gt;Go ahead&lt;/button&gt;
              &lt;/div&gt;
          );
      }
  }
  
  function mapStateToProps(state) {
      return {
          act: state.users,
      };
  }
  
  function matchDispatchToProps(dispatch) {
      return bindActionCreators({postUsers}, dispatch)
  }
  export default connect(mapStateToProps, matchDispatchToProps)(Layout);
  </code></pre>
  
  <p><strong>src/reducers/userReducers.js</strong></p>
  
  <pre><code>const initalState = {
  fetching: false,
  fetched: false,
  users: [],
  error: []
  };
  export default function(state=initalState, action) {
      switch(action.type){
          case "USERS_POST_PENDING":{
              return {...state, fetching: true,}
          }
          case "USERS_POST_FULFILLED":{
                return {...state, fetching: false,fetched: true, users:[...state.users, action.payload],}
          }
          case "USERS_POST_REJECTED":{
              return {...state, fetching: false, error: action.payload,}
          }
          default:
              return state;
      }
  }
  </code></pre>
  
  <p><strong>src/reducers/index.js</strong></p>
  
  <pre><code>import { combineReducers } from 'redux';
  import usersReducer from './usersReducer';
  import tweetsReducer from './tweetsReducer';
  export default combineReducers({
      users: usersReducer,
      tweets: tweetsReducer,
  })
  </code></pre>
  
  <p><strong>src/index.js</strong></p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import { createStore, applyMiddleware } from 'redux'
  import thunk from 'redux-thunk';
  import logger from 'redux-logger';
  import promise from 'redux-promise-middleware';
  import reducers from './reducers/index';
  import { Provider } from 'react-redux';
  import registerServiceWorker from './registerServiceWorker';
  
  import Layout from './components/layout';
  
  
  const store = createStore(reducers, applyMiddleware(promise(),thunk, logger,loadingBarMiddleware()));
  const app = document.getElementById('root');
  
  ReactDOM.render(
  &lt;Provider store={store}&gt;
          &lt;Layout /&gt;
  &lt;/Provider&gt;
      ,app);
  registerServiceWorker();
  </code></pre>