title: How to prevent infinite loop in react component?
body: <p>Hi I am new to react and unfortunately I get an infinite loop with this code, and am not sure why. This is the code in question:</p>
  
  <pre><code>if (projectInfo) {
          console.log('Length is', projectInfo.length);
  
          for (let i = 0; i &lt; projectInfo.length; i++) {
              setValues({ ...values, fromDates: projectInfo[i].fromDate });
              console.log('i is', i);
          }
      }
  </code></pre>
  
  <p>The whole component is here:</p>
  
  <pre><code>import React from 'react';
  import Grid from '@material-ui/core/Grid';
  import Box from '@material-ui/core/Box';
  import Map from '../../shared/components/Map/Map';
  
  export default function FieldworkInofrmation(props) {
      const projectInfo = props.props.fieldwork;
  
      const [values, setValues] = React.useState({
          fromDates: ' ',
      });
  
      if (projectInfo) {
          console.log('Length is', projectInfo.length);
  
          for (let i = 0; i &lt; projectInfo.length; i++) {
              setValues({ ...values, fromDates: projectInfo[i].fromDate });
              console.log('i is', i);
          }
      }
  
      return (
          &lt;Grid container spacing={3}&gt;
              &lt;Grid item xs={12}&gt;
                  &lt;Box fontWeight="fontWeightBold" m={1}&gt;
                      Fieldwork Information
                  &lt;/Box&gt;
              &lt;/Grid&gt;
              &lt;Grid item xs={12}&gt;
                  &lt;Box fontWeight="fontWeightLight" m={1}&gt;
                      Click on map point to view details for the point
                  &lt;/Box&gt;
              &lt;/Grid&gt;
              &lt;Grid item xs={12}&gt;
                  &lt;Map /&gt;
              &lt;/Grid&gt;
              &lt;Grid item xs={1}&gt;
                  &lt;Box fontWeight="fontWeightLight" m={1}&gt;
                      Type:
                  &lt;/Box&gt;
              &lt;/Grid&gt;
              &lt;Grid item xs={1}&gt;
                  &lt;Box fontWeight="fontWeightLight" m={1}&gt;
                      Period:
                  &lt;/Box&gt;
              &lt;/Grid&gt;
              &lt;Grid item xs={1}&gt;
                  &lt;Box fontWeight="fontWeightLight" m={1}&gt;
                      From:
                  &lt;/Box&gt;
              &lt;/Grid&gt;
              &lt;Grid item xs={1}&gt;
                  &lt;Box fontWeight="fontWeightLight" m={1}&gt;
                      To:
                  &lt;/Box&gt;
              &lt;/Grid&gt;
              &lt;Grid item xs={6}&gt;
                  &lt;Box fontWeight="fontWeightLight" m={1}&gt;
                      Coordinates:
                  &lt;/Box&gt;
              &lt;/Grid&gt;
              &lt;Grid item xs={1}&gt;
                  &lt;Box fontWeight="fontWeightLight" m={1}&gt;
                      Station:
                  &lt;/Box&gt;
              &lt;/Grid&gt;
              &lt;Grid item xs={1}&gt;
                  &lt;Box fontWeight="fontWeightLight" m={1}&gt;
                      Location:
                  &lt;/Box&gt;
              &lt;/Grid&gt;
          &lt;/Grid&gt;
      );
  }
  </code></pre>
  
  <p>I tried inserting "i++" at the end of the for-looop but still got the error: "Too many re-renders. React limits the number of renders to prevent an infinite loop". What could I do to solve this?</p>