Using different state in a nested object in two same component - reactjs

Question

I would like to ask if how to dispatch or catch the data in mapStateToProps if data that I want to get is in a nested state and the identifier would be the this.props.group that is passed in FilmList via the Parent Component.

// Parent Component

<Row>
    <FilmList group="upcoming" groupTitle="Upcoming Movies" />
    <FilmList group="top_rated" groupTitle="Top Rated Movies" />
</Row>



// 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) => {
                return <FilmItem key={item.id} film={item} />
            });

            return film;
        }
    }
    render(){
        console.log('new');
        return(
            <div className={styles.filmContainer}>
                <h1>{ this.props.groupTitle }</h1>
                { this.renderFilmItem() }
            </div>
        );
    }
}


function mapStateToProps(state){
    return {
        data: state.film.data.upcoming
    }
}

This is what my state looks like:

This is my reducer:

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) => {
    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;
}

Currently in my mapStateToProps I only access state.film.data.upcoming what I want to achieve is like state.film.data.{this.props.group} somewhere along that code so it will re render the component when "top_rated" or "upcoming" data state change.

Not sure what you are trying to do. However, I can see if you use state.file.data, .slice(0,6) will fail because it's not an array. That's why it doesn't re-render. — user1736525
– user1736525, Commented Feb 22, 2017 at 3:11

user1736525 · Accepted Answer · 2017-02-22 03:38:03Z

1

So if state.file.data.upcoming is working fine, then you should be able to use state.file.data in mapStateToProps then do state.file.data[this.props.group] in your component.

answered Feb 22, 2017 at 3:38

user1736525

1,1291 gold badge10 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Using different state in a nested object in two same component - reactjs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related