title: Loosing animation when rerendering all object - React
body: <p>I have a week object like this: {day: boolean} initially set to false for all days.
  When the user login to the website, there's an API call to set the week.
  Every day of the week is managed by its own Switch component and represented by custom React 'Day' objects that I created.</p>
  <p>I have to manage the state of the days on the mainPage (parent) component so I'll be able to set the switches after the user logged in. The problem is, because of that, every time the user clicks on one of the switches, I have to rerender all the days and because of that it looks like there is no switch animation.
  Do you have any idea of how to solve this issue?
  I'm new to React so I'll very appreciate every answer.</p>
  <p>There's my code:</p>
  <p>MainPage:
  <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>const MainPage = () =&gt; {
  
      const [week, setWeek] = useState({
          sunday: false,
          monday: false,
          tuesday: false,
          wednesday: false,
          thursday: false,
          friday: false,
          saturday: false
      });
      
      const updateDay = (day, state) =&gt; {
          let updatedWeek = {...week};
          updatedWeek[day] = state;
          setWeek(updatedWeek);
      }
  
      const setData = (email, userData) =&gt; {
          userEmail = email;
          
          setWeek({
              sunday: userData.sunday,
              monday: userData.monday,
              tuesday: userData.tuesday,
              wednesday: userData.wednesday,
              thursday: userData.thursday,
              friday: userData.friday,
              saturday: userData.saturday
          });
      }
  
      return (
        &lt;React.Fragment&gt;
          &lt;Popup setData={setData} key="popup"/&gt;
          &lt;div className="main-container"&gt;
              &lt;form className="main-form" onSubmit={onSubmit}&gt;
                  &lt;div className="form-body"&gt;
                        &lt;ul className="week-list"&gt;
                            {
                            Object.keys(week).map((keyName, keyIndex) =&gt; {
                                return &lt;Day 
                                        key={keyName+week[keyName]}
                                        day={keyName}
                                        state={week[keyName]}
                                        updateDay={updateDay}
                                    /&gt;
                                })
                            }
                        &lt;/ul&gt;
                  &lt;/div&gt;
                  &lt;div className="Submit-button-wrapper"&gt;
                      &lt;Button variant="contained" color="primary" type="submit"&gt;
                          Submit
                      &lt;/Button&gt;
                  &lt;/div&gt;
              &lt;/form&gt;
          &lt;/div&gt;
        &lt;/React.Fragment&gt;
      )
  }</code></pre>
  </div>
  </div>
  </p>
  <p>Day:</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>const Day = (props) =&gt; {
  
      const changeState = () =&gt; {
          props.updateDay(props.day, !props.state);
      }
  
      return (
          &lt;li 
              onClick={e =&gt; {
                  changeState();
              }}
              className="li-day"
              id={`week-day-${props.day}`}&gt;
  
              &lt;h2 className="day-text"&gt;{props.day.charAt(0).toUpperCase() + props.day.slice(1) /* Changing first letter to upper case */ }&lt;/h2&gt;
              &lt;Switch 
                  className="day-switch"
                  color="primary"
                  checked={props.state}
              /&gt;
          &lt;/li&gt;
      )
  }</code></pre>
  </div>
  </div>
  </p>