title: How to fetch an array of objects and render it in the component as a normal text using React Hooks?
body: <p>I want to display some cards information in my app fetching data from an API. Each customer has 1, 2 or 3 different cards, I'm using JWToken for authentication but I have not included it here. So, the API response is not static.</p>
  <pre><code>Request: GET &quot;/xx/cards&quot;
  
  Response is an array of objects: 
  
  [
      {
          &quot;cardId&quot;: &quot;1&quot;,
          &quot;cardType&quot;: {
              &quot;3&quot;: &quot;General Card&quot; 
          },
          &quot;salutation&quot;: {
              &quot;1&quot;: &quot;Mrs.&quot; 
          },
          &quot;firstName&quot;: &quot;Test&quot;,
          &quot;lastName&quot;: &quot;User&quot;,
          &quot;status&quot;: 'active',
          &quot;creationDate&quot;: &quot;30.10.2020&quot;,
          
      },
     {
          &quot;cardId&quot;: &quot;2&quot;,
          &quot;cardType&quot;: {
              &quot;2&quot;: &quot;Special Card&quot; 
          },
          &quot;salutation&quot;: {
              &quot;2&quot;: &quot;Mr.&quot; 
          },
          &quot;firstName&quot;: &quot;Test1&quot;,
          &quot;lastName&quot;: &quot;User1&quot;,
          &quot;status&quot;: 'active',
          &quot;creationDate&quot;: &quot;30.10.2020&quot;,
          
      },
   
  ]
  </code></pre>
  <p>In The React Context:</p>
  <pre><code>const [cards, setCards] = useState&lt;any&gt;([]);
  </code></pre>
  <p>In MyCards.tsx component:</p>
  <pre><code>const MyCards: React.FC = () =&gt; {
    const {
      cards,
      setCards,
    } = React.useContext(AuthContext);
  
    
    const [content, setContent] = useState([]);
  
    useEffect(() =&gt; {
      axios.get(&quot;/xx/cards&quot;).then(
        (response) =&gt; {
  
          setContent(response.data);
          setCards(response.data);  
        },
        (error) =&gt; {
          const _content =
            (error.response &amp;&amp; error.response.data) ||
            error.message ||
            error.toString();
  
          setContent(_content);
        }
      );
    }, []);
  
    return (
      &lt;React.Fragment&gt;
        &lt;IonPage className=&quot;ion-page&quot; id=&quot;main-content&quot;&gt;
         
         &lt;IonContent className=&quot;ion-padding&quot;&gt;
            &lt;h1&gt;Your Cards&lt;/h1&gt;
  
            &lt;p&gt;{JSON.stringify(cards)}&lt;/p&gt;
  
          ...HERE I should write some code but don't know what...
  
          &lt;/IonContent&gt;
        &lt;/IonPage&gt;
      &lt;/React.Fragment&gt;
    );
  };
  
  export default MyCards;
  
  </code></pre>
  <p>I want to list the cards as a normal text (as following) in my component:</p>
  <pre><code>Mrs. Test User
  Card Id: 1
  Card Type: General Card
  
  Mr. Test1 User1
  Card Id: 2
  Card Type: Special Card
  </code></pre>
  <p>How to achieve this ? I don't really know how to set state for an array of objects.
  Any help would be appreciated. Thanks :)</p>