React - Spread MapStateToProps with the same props

Question

I have this MapStateToProps:

const mapStateToProps = (state) => {
  const date = new Date();
  const year = date.getFullYear();
  const month = date.getMonth() + 1;

  const ESFReport = getESFReport(state);
  const resultStatusReport = getResultStatusReport(state);

  return {
    companInfo: getCompanyInfo(state),
    companyId: getCompanyId(state),
    ...ESFReport,
    ...resultStatusReport,
    year,
    month,
  };
};

And both ...ESFReport, and ...resultStatusReport, have the same property: report but I need somehow to change the name because in the same component I use const { report } = this.props two times but for different props.

How can I do this? (it used to work when I have only ...ESFReport, but when I added ...resultStatusReport, it broke).

Thanks in advance.

do you need anything other than `report` on `ESFReport` and `resultStatusReport`? — Anthony, May 09 '18 at 23:43
yes @Tony `report` is an array of objects that has the keys report, error, year and month and I need to access to everything inside `report` — Lizz Parody, May 09 '18 at 23:46
Sorry, no, report is the only thing I need from both of them, and inside report is everything I need — Lizz Parody, May 09 '18 at 23:47

score 2 · Accepted Answer · answered May 09 '18 at 23:47

If you don't need anything other than report from the ESFReport and resultStatusReport objects you could do:

const mapStateToProps = (state) => {
  const date = new Date();
  const year = date.getFullYear();
  const month = date.getMonth() + 1;

  const { report: ESFReport } = getESFReport(state);
  const { report: resultStatusReport } = getResultStatusReport(state);

  return {
    companInfo: getCompanyInfo(state),
    companyId: getCompanyId(state),
    ESFReport,
    resultStatusReport,
    year,
    month,
  };
};

It just renames the report property on each to ESFReport and resultStatusReport. You would then have this.props.ESFReport which would actually be ESFReport.report and this.props.resultStatusReport which would be resultStatusReport.report.

React - Spread MapStateToProps with the same props

1 Answers1