title: Using different state in a nested object in two same component - reactjs
body: <p>I would like to ask if how to dispatch or catch the data in <code>mapStateToProps</code> if data that I want to get is in a nested state and the identifier would be the <code>this.props.group</code> that is passed in <code>FilmList</code> via the Parent Component.</p>
  
  <pre><code>// Parent Component
  
  &lt;Row&gt;
      &lt;FilmList group="upcoming" groupTitle="Upcoming Movies" /&gt;
      &lt;FilmList group="top_rated" groupTitle="Top Rated Movies" /&gt;
  &lt;/Row&gt;
  
  
  
  // Child Component
  class FilmList extends React.Component {
      constructor(props){
          super(props);
      }
      componentDidMount(){
          this.props.getMovieByGroup(this.props.group);
      }
  
      renderFilmItem(){
          if(this.props.data){
              var film = this.props.data.upcoming.slice(0,6).map((item) =&gt; {
                  return &lt;FilmItem key={item.id} film={item} /&gt;
              });
  
              return film;
          }
      }
      render(){
          console.log('new');
          return(
              &lt;div className={styles.filmContainer}&gt;
                  &lt;h1&gt;{ this.props.groupTitle }&lt;/h1&gt;
                  { this.renderFilmItem() }
              &lt;/div&gt;
          );
      }
  }
  
  
  function mapStateToProps(state){
      return {
          data: state.film.data.upcoming
      }
  }
  </code></pre>
  
  <p>This is what my state looks like:</p>
  
  <p><a href="https://i.stack.imgur.com/oUbOL.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/oUbOL.png" alt="enter image description here"></a></p>
  
  <p>This is my reducer:</p>
  
  <pre><code>const INITIAL_STATE = {
      data: {},
      error: {},
  };
  
  
  function processData(initialData, data) {
      let updated = initialData;
      updated[data.group] = data.results;
      return updated;
  }
  
  export default (state = INITIAL_STATE, action) =&gt; {
      switch(action.type) {
          case GET_FILM_SUCCESS: {
              return Object.assign({}, state.data[action.data.group], {
                  data: processData(state.data,action.data)
              });
          }
  
          case GET_FILM_FAILURE: {
              return { ...state, error: action.data }
          }
      }
      return state;
  }
  </code></pre>
  
  <p>Currently in my <code>mapStateToProps</code> I only access <code>state.film.data.upcoming</code> what I want to achieve is like <code>state.film.data.{this.props.group}</code> somewhere along that code so it will re render the component when "top_rated" or "upcoming" data state change.</p>