CODEWITHSUNDEEP
javascriptreactjsspread-syntax
Lizz Parody
Lizz Parody

Reputation: 1765

React - Spread MapStateToProps with the same props

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.

Upvotes: 0

Views: 116

Answers (1)

Anthony
Anthony

Reputation: 6482

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.

Upvotes: 2

Related Questions