title: Need to re-render component after state is set to true
body: <p>In my react app, I have a page that allows the user to &quot;add&quot; exercises to a personal list. The option to add an exercise is included in one &quot;page&quot; and the ability to see added exercises is view in a other. <a href="https://i.stack.imgur.com/SAAC8.png" rel="nofollow noreferrer">Side by side showing the two pages, notice 'Your Exercises' is empty</a>. What I am trying to do is display these selected exercises. The exercises themselves are loaded via mapping function, from an array of objects. each object has a &quot;selected&quot; field and are set as &quot;false&quot; by default. My &quot;add&quot; button in the exercises page changes the state value of each component to &quot;true&quot;, so now what I want to do is get these &quot;true&quot; values and render them on the page where it should show your exercises.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>//Render your exercises
  import React from "react";
  import ExListItem from "./ExListItem";
  // import selectedExercises from "../../../selectedExercises";
  import exercises from  "../../../exercises";
  
  const selectedExerciseList = exercises
    .filter(function (item) {
      return item.selected === true;
    })
    .map(function ({name, reps}) {
      return {name, reps};
    });
  // MAP HERE
  function createSelectedExercises(exercises) {
    return &lt;ExListItem name={exercises.name} reps={exercises.reps} /&gt;;
  }
  function ExerciseList() {
    return (
      &lt;ul data-tag="channelList" id="exercise-list" class="list-group mb-3"&gt;
        {selectedExerciseList.map(createSelectedExercises)}
      &lt;/ul&gt;
    );
  }
  
  export default ExerciseList;</code></pre>
  </div>
  </div>
  
  Shouldnt this map the exercises?</p>