title: React Hook useState Is Returning Undefined
body: <p>I am trying to fill a table with data from an API.</p>
  <p>UPDATED*************</p>
  <pre><code>import React, { useMemo, useState, useCallback, useEffect } from &quot;react&quot;;
  
  import {
    AppLayout,
    Button,
    Box,
    Form,
    SpaceBetween,
    Grid,
  } from &quot;@affn/awsui-components-react/polaris&quot;;
  import &quot;@affn/awsui-global-styles/polaris.css&quot;;
  import &quot;./styles/landing-page.scss&quot;;
  import { appLayoutLabels, externalLinkProps } from &quot;./common/labels&quot;;
  import Picture1 from &quot;./resources/engineLogos/bric_team_dark_backgroung(1).svg&quot;;
  import {
    ExternalLinkItem,
    Navigation,
    InfoLink,
  } from &quot;./commons/common-components-BRIC&quot;;
  
  function BricPage() {
    
    const Content = ({ navigationOpen }) =&gt; {
      //Constants needed by the form ------------------------------------------------
      
      const refreshPage = () =&gt; {
        window.location.reload();
      };
  
      // The comment (i.e conversation) id must be unique
      const conversationId = uuidv4();
  
      //Function to handle submit click and create SIM
      const handleClick = (
        title1,
        description1,
      ) =&gt; () =&gt; {
        console.log(title1);
        console.log(description1);
  
      };
  
      const [GetSimIDs, setGetSimIDs] = React.useState([]); //Which is the impacted region?
  
    // Using useEffect to call the API once mounted and set the data
    useEffect(() =&gt; {
      window.harxny.api
        .invokeProxy(
          &quot;/sit/ises?sort=createDate desc&amp;q=status:(Open) containingFolder:(45-b5b9-4829-8b87-489053f9bb42)&quot;,
          {
            method: &quot;GET&quot;,
            // SIM integration is only possible from the 'beta' and 'corp' stages.
            stage: &quot;corp&quot;,
            headers: {
              &quot;Content-Type&quot;: &quot;application/json&quot;,
            },
          }
        ) //api finishes here
        .then((xhr) =&gt; {
          //response is captured here
          //var SIMID = JSON.parse(xhr.response).id;
          console.log(xhr.responseText);
          const data = JSON.parse(xhr.response);
          //const data = xhr.response;
          console.log(data);
          console.log(data.totalNumberFound);
          setGetSimIDs(data);
          console.log(GetSimIDs);
        });
    }, []);
  
  
      //End of Constants -------------------------------------------------------------
      console.log(GetSimIDs);
      return (
        &lt;Box margin={{ bottom: &quot;l&quot; }}&gt;
        
          &lt;div className=&quot;center-form&quot;&gt;
            &lt;Box&gt;
              &lt;Grid
                gridDefinition={[
                  {
                    colspan: { xl: &quot;2&quot;, l: &quot;2&quot;, s: &quot;5&quot;, xxs: &quot;10&quot; },
                    offset: { l: &quot;2&quot;, xxs: &quot;1&quot; },
                  },
                  {
                    colspan: { xl: &quot;2&quot;, l: &quot;3&quot;, s: &quot;5&quot;, xxs: &quot;10&quot; },
                    offset: { s: &quot;0&quot;, xxs: &quot;1&quot; },
                  },
                ]}
              &gt;
                &lt;div className=&quot;custom-home-main-content-area&quot;&gt;
                  &lt;SpaceBetween size=&quot;l&quot;&gt;
                    &lt;Form
                      actions={
                        &lt;SpaceBetween direction=&quot;horizontal&quot; size=&quot;xs&quot;&gt;
                          &lt;Button onClick={refreshPage} variant=&quot;link&quot;&gt;
                            Reset Form
                          &lt;/Button&gt;
  
                          &lt;Button
                            variant=&quot;primary&quot;
                            onClick={handleClick(
                              title1,
                              description1,
                            )}
                            ariaLabel=&quot;Submit&quot;
                          &gt;
                            Submit
                          &lt;/Button&gt;
                        &lt;/SpaceBetween&gt;
                      }
                    &gt;
                    &lt;/Form&gt;
                  &lt;/SpaceBetween&gt;
                &lt;/div&gt;
  
              {/* Table goes here */}
  
              {console.log(GetSimIDs)}
  
  
                &lt;tbody&gt;
                  &lt;tr&gt;
                    &lt;th&gt;title&lt;/th&gt;
                    &lt;th&gt;Id&lt;/th&gt;
                  &lt;/tr&gt;
                  {GetSimIDs.documents.map((item, i) =&gt; (
                    &lt;tr key={i}&gt;
                      &lt;td&gt;{item.title}&lt;/td&gt;
                      &lt;td&gt;{item.id}&lt;/td&gt;
                    &lt;/tr&gt;
                  ))}
                &lt;/tbody&gt;
              &lt;/Grid&gt;
            &lt;/Box&gt;
          &lt;/div&gt;
        &lt;/Box&gt;
      );
    };
  
    const [navigationOpen, setNavigationOpen] = React.useState(false);
  
    return (
      &lt;AppLayout
        disableContentPaddings={true}
        content={&lt;Content /&gt;}
        navigation={&lt;Navigation activeHref=&quot;#/&quot; /&gt;}
        navigationOpen={navigationOpen}
        onNavigationChange={({ detail }) =&gt; setNavigationOpen(detail.open)}
        toolsHide={true}
        ariaLabels={appLayoutLabels}
      /&gt;
    );
  }
  
  export default BricPage;
  
  </code></pre>
  <p>The state <code>GetSimIDs</code> is updated successfully with data like this:</p>
  <pre><code>{
    &quot;documents&quot;: [
      {
        &quot;assignedFolder&quot;: &quot;4a37-416c-8531-&quot;,
        &quot;extensions&quot;: {
          &quot;tt&quot;: {
            &quot;impact&quot;: 5,
            &quot;category&quot;: &quot;EiC&quot;,
            &quot;type&quot;: &quot;IBug&quot;,
            &quot;item&quot;: &quot;Macro&quot;,
            &quot;assignedGroup&quot;: &quot;EiC&quot;,
            &quot;justification&quot;: [],
            &quot;minImpact&quot;: 5,
            &quot;status&quot;: &quot;Assd&quot;
          }
        },
        &quot;watchers&quot;: [
          { &quot;id&quot;: &quot;bric-primary@amazon.com&quot;, &quot;type&quot;: &quot;email&quot; },
          { &quot;id&quot;: &quot;sssesuni@amazon.com&quot;, &quot;type&quot;: &quot;email&quot; },
          { &quot;id&quot;: &quot;raaishwa@amazon.com&quot;, &quot;type&quot;: &quot;email&quot; },
          { &quot;id&quot;: &quot;dipchakr@amazon.com&quot;, &quot;type&quot;: &quot;email&quot; }
        ],
        &quot;customFields&quot;: {
          &quot;number&quot;: [{ &quot;id&quot;: &quot;fte_saving&quot;, &quot;value&quot;: 0 }],
          &quot;date&quot;: [
            { &quot;id&quot;: &quot;delivery_date&quot;, &quot;value&quot;: &quot;2022-05-17T15:43:49.825Z&quot; }
          ],
          &quot;string&quot;: [
            { &quot;id&quot;: &quot;category_of_the_request&quot;, &quot;value&quot;: &quot;Other&quot; },
            { &quot;id&quot;: &quot;region_of_impact&quot;, &quot;value&quot;: &quot;NA&quot; },
            { &quot;id&quot;: &quot;tool_type&quot;, &quot;value&quot;: &quot;Excel Macro&quot; },
            {
              &quot;id&quot;: &quot;impacted_tool&quot;,
              &quot;value&quot;: &quot;Tickets Helper&quot;
            }
          ]
        }
       
      },
      {
        &quot;title&quot;: &quot;Issue or Bug - Global Wizard - NA&quot;,
        &quot;assignedFolder&quot;: &quot;416c-8531-37fa3a701712&quot;,
        
        &quot;watchers&quot;: [{ &quot;id&quot;: &quot;bprimary@a.com&quot;, &quot;type&quot;: &quot;email&quot; }],
        &quot;customFields&quot;: {
          &quot;number&quot;: [{ &quot;id&quot;: &quot;fte_saving&quot;, &quot;value&quot;: 0 }],
          &quot;date&quot;: [
            { &quot;id&quot;: &quot;delivery_date&quot;, &quot;value&quot;: &quot;2022-05-13T02:22:46.751Z&quot; }
          ],
          &quot;string&quot;: [
            { &quot;id&quot;: &quot;category_of_the_request&quot;, &quot;value&quot;: &quot;Other&quot; },
            { &quot;id&quot;: &quot;region_of_impact&quot;, &quot;value&quot;: &quot;NA&quot; },
            { &quot;id&quot;: &quot;tool_type&quot;, &quot;value&quot;: &quot;Excel Macro&quot; },
            { &quot;id&quot;: &quot;impacted_tool&quot;, &quot;value&quot;: &quot;Global Wizard&quot; }
          ]
        }
        
      }
    ],
    &quot;totalNumberFound&quot;: 2,
    &quot;searchLogMessages&quot;: [],
    &quot;startToken&quot;: &quot;&quot;
  }
  
  </code></pre>
  <p>So I tried to update the table with the following code:</p>
  <pre><code>&lt;tbody&gt;
                  &lt;tr&gt;
                    &lt;th&gt;title&lt;/th&gt;
                    &lt;th&gt;Id&lt;/th&gt;
                    &lt;th&gt;status&lt;/th&gt;
                  &lt;/tr&gt;
                  {GetSimIDs.map((documents, i) =&gt; (
                    &lt;tr key={i}&gt;
                      &lt;td&gt;{documents.title}&lt;/td&gt;
                      &lt;td&gt;{documents.id}&lt;/td&gt;
                      &lt;td&gt;{documents.status}&lt;/td&gt;
                    &lt;/tr&gt;
                  ))}
                &lt;/tbody&gt;
  </code></pre>
  <p>But I keep getting an error in line</p>
  <pre><code>{GetSimIDs.map((documents, i) =&gt; ( 
  </code></pre>
  <p>Saying that <code>TypeError: s is undefined</code></p>
  <p>Any idea as of why it seems not getting the data from the hook?</p>
  <p>I am very new to react so all feedback would be appreciated.</p>
  <p>Thanks
  Luis V.</p>