Material-ui app.js

App.js

import React, { Component, Fragment } from 'react'
import { Header, Footer } from './layouts'
import Exerciese from './exercises'
import { muscles, exercises } from './../store'

export default class App extends Component {
  constructor(props) {
    super(props)

    this.state = {
      exercises
    }
  }

  getExercisesByMuscles() {
    return Object.entries(
      this.state.exercises.reduce((exercises, exercise) => {
        const { muscles } = exercise
        exercises[muscles] = exercises[muscles]
          ? [...exercises[muscles], exercise]
          : [exercise]
        return exercises
      }, {})
    )
  }

  render() {
    const exercises = this.getExercisesByMuscles()
    return (
      <Fragment>
        <Header />
        <Exerciese exercises={exercises} />
        <Footer muscles={muscles} />
      </Fragment>
    )
  }
}