title: Loop over named objects in state and pass to child components with React?
body: <p>My top level component has exercises in its state. The different exercices are stored under the body part that they work: </p>
  
  <pre><code>  exercises: {
      chestAndTriceps: ['Push up', 'Bench press', 'Dumbbell bench press', 'Mountain climbers'],
      backAndBicep: ['Pull up', 'Chin up', 'Dumbbell curl', 'Horizontal row'],
      core: ['plank', 'Sit ups', 'Crunches']
    }
  </code></pre>
  
  <p>From my top level component I need to load a child component for each bodypart, and also pass the exercises for that body part to it. If I code this manually it looks like this: </p>
  
  <pre><code>&lt;Child
      bodyPart={chestAndTriceps}
      exercises={this.state.exercises.chestAndTriceps} 
  /&gt;
  &lt;Child
      bodyPart={backAndBicep}
      exercises={this.state.exercises.backAndBicep} 
  /&gt;
  &lt;Child
      bodyPart={core}
      exercises={this.state.exercises.core} 
  /&gt;
  </code></pre>
  
  <p>How can I loop or map over my state so Im not repeating myself? </p>