# Summary page with react-redux: container or presentational component

I'm building a Summary page for merchant activity in a marketplace with react and redux.

The application has already a structure where there is a "MerchantContianer"

class MerchantContainer extends Component {
render() {
const merchList = [];
for(let key in this.props.merchants) {
for(let id in this.props.merchants[key].byId) {
let row = this.props.merchants[key].byId[id];
merchList.push((
<Merchant
type={key}
key={id}
date={row.date}
name={row.name}
amount={row.amount}
delete={() => this.props.onDeleteRow(row.id, key)} />
));
}
};
return (
<div className={classes.List}>
{merchList}
</div>

)
}
}

const mapStateToProps = state => {
return {
merchants: state.list.merchants
};
};

const mapDispatchtoProps = dispatch => {
return {
onDeleteRow: (id, type) => {dispatch(actions.deleteMerchantsFromList(id, type))}
};
};

export default connect(mapStateToProps, mapDispatchtoProps)(MerchantContainer);


and a Merchant component

const Merchant = props => {
const classArr = [classes.Merchant, classes[props.type]].join(' ');
return (
<li className={classArr}>
<span>{props.name}</span>
<span>{props.date}</span>
<span>{props.amount}</span>
<Button click={props.delete} btnType="Delete">Delete</Button>
</li>
)
};

export default Merchant;


In addition there is a ReviewsContainer with the same structure of MerchantContainer but for a list of reviews (with a Review container with the same structure of Merchant).

Now I want to create a Summary component

const Summary = props => {
return (
<div>
<MerchantContainer />
<ReviewsContainer />
</div>
);
}


And use a Switch Component in App.js

<Switch>
<Route path="/merchants" component={MerchantContainer} />
<Route path="/reviews" component={ReviewsContainer} />
<Route path="/summary" component={Summary} />
</Switch>


It is ok to use a "dumb" component for the Summary component? Or do I have to restructure so the Summary is the only container and MerchantContainer and ReviewsContainer must work with props from Summary?

One of the other features is a Dashboard component that will include the Summary and other components (is still not defined in the requirements for this task). So this dilemma will be repeated.

• If MerchantContainer and ReviewContainer use mostly the same state or actions, you could reduce duplication by having a common container for both of those.
• If MerchantContainer and ReviewContainer don't have any state in common (which I think is the case here), there's no real value in having Summary as a common container. Quite the oppositive: If you'd make Summary the common container, Summary would have access to state and actions that Summary doesn't care about at all.