score:1

Accepted answer

I am not sure how your data structure is, but hopefully the below will give an idea of how to do this. I have also mocked this function in a codeSandBox for you so you can see it displaying the correct data. I have not rounded the numbers (Will leave you to format it how you like).

The link to the codeSandBox is here: https://codesandbox.io/s/8xon4yxo58

class Dashboard extends Component {
  dayOfWeek = () => {
    const { sessionList } = this.props;

    let sundayIncome = 0;
    let mondayIncome = 0;
    let tuesdayIncome = 0;
    let wednesdayIncome = 0;
    let thursdayIncome = 0;
    let fridayIncome = 0;
    let saturdayIncome = 0;

    sessionList.forEach(session => {
      if (session.dayOfWeek === "Sunday") {
        sundayIncome += session.price * session.duration;
      } else if (session.dayOfWeek === "Monday") {
        mondayIncome += session.price * session.duration;
      } else if (session.dayOfWeek === "Tuesday") {
        tuesdayIncome += session.price * session.duration;
      } else if (session.dayOfWeek === "Wednesday") {
        wednesdayIncome += session.price * session.duration;
      } else if (session.dayOfWeek === "Thursday") {
        thursdayIncome += session.price * session.duration;
      } else if (session.dayOfWeek === "Friday") {
        fridayIncome += session.price * session.duration;
      } else {
        saturdayIncome += session.price * session.duration;
      }
    });

    return [
      mondayIncome,
      tuesdayIncome,
      wednesdayIncome,
      thursdayIncome,
      fridayIncome,
      saturdayIncome,
      sundayIncome
    ];
  };

  render() {
    const sessionData = this.dayOfWeek();

    return (
      <div className="container mt-5">
        <p>
          {`Monday: ${sessionData[0]}`} <br />
          {`Tuesday: ${sessionData[1]}`} <br />
          {`Wednesday: ${sessionData[2]}`} <br />
          {`Thursday: ${sessionData[3]}`} <br />
          {`Friday: ${sessionData[4]}`} <br />
          {`Saturday: ${sessionData[5]}`} <br />
          {`Sunday: ${sessionData[6]}`} <br />
        </p>
      </div>
    );
  }
}

const sessionList = [
  {
    dayOfWeek: "Sunday",
    price: 4.99,
    duration: 40
  },
  {
    dayOfWeek: "Tuesday",
    price: 4.99,
    duration: 2
  },
  {
    dayOfWeek: "Friday",
    price: 4.99,
    duration: 1
  },
  {
    dayOfWeek: "Sunday",
    price: 4.99,
    duration: 6
  },
  {
    dayOfWeek: "Monday",
    price: 4.99,
    duration: 7
  },
  {
    dayOfWeek: "Wednesday",
    price: 4.99,
    duration: 40
  },
  {
    dayOfWeek: "Sunday",
    price: 4.99,
    duration: 3
  },
  {
    dayOfWeek: "Sunday",
    price: 4.99,
    duration: 9
  },
  {
    dayOfWeek: "Thursday",
    price: 4.99,
    duration: 12
  }
];

The above produces this output

Monday: 34.93 
Tuesday: 9.98 
Wednesday: 199.60000000000002 
Thursday: 59.88 
Friday: 4.99 
Saturday: 0 
Sunday: 289.42

Hope I have understood your question correctly and the above is helpful.

score:1

forEach don't return anything ( it's return value is undefined ), you need to store value in variable and return at end of function.

    dayOfWeek = () => {
    const {sessionList} = this.props;
    let sundayIncome = 0;
    let mondayIncome = 0;
    let tuesdayIncome = 0;
    let wednesdayIncome = 0;
    let thursdayIncome = 0;
    let fridayIncome = 0;
    let saturdayIncome = 0;

    sessionList.forEach(session => {
        if (session.dayOfWeek === 'Sunday') {
            sundayIncome += (session.price * session.duration) 
        }
        else if (session.dayOfWeek === 'Monday') {
            mondayIncome += (session.price * session.duration) 
        }
        else if (session.dayOfWeek === 'Tuesday') {
            tuesdayIncome += (session.price * session.duration) 
        }
        else if (session.dayOfWeek === 'Wednesday') {
            wednesdayIncome += (session.price * session.duration) 
        }
        else if (session.dayOfWeek === 'Thursday') {
            thursdayIncome += (session.price * session.duration) 
        }
        else if (session.dayOfWeek === 'Friday') {
            fridayIncome += (session.price * session.duration) 
        }
        else {
            saturdayIncome += (session.price * session.duration) 
        }
    })
 return {sundayIncome ,mondayIncome,tuesdayIncome,wednesdayIncome,thursdayIncome,fridayIncome,saturdayIncome}
}

score:1

You should return the value and use reduce instead of forEach.

It would look like:

...
return sessionList.reduce(
  (income, session) => {
    income[session.dayOfWeek] += (session.price * session.duration);
    return income;
  },
  { Monday: 0, Thueday: 0, Wednesday: 0, Thursday: 0, Friday:0, Saturday: 0, Sunday: 0 }
);
...

Cf reduce for details

As of where to create this (use a state or not) it a more architectural problem that depend on where and how you intend to use this information.


Related Query

More Query from same tag