title: My return type is in form of Array of objects but I am unable to map the array to get value
body: <p>I am trying to fetch the value of each element in the array but the map() throws me an error. I have to make an API call and get the details of the user.</p>
  <p>But I get the data on console but while I try to print it shows undefined or null. Can anyone tell me how can I map the values here.</p>
  <p>types.ts</p>
  <pre><code>export const GET_DETAILS = &quot;GET_DETAILS&quot;;
  export const SET_LOADING = &quot;SET_LOADING&quot;;
  export const SET_ERROR = &quot;SET_ERROR&quot;;
  export const SET_ALERT = &quot;SET_ALERT&quot;;
  
  
  export interface UserData {
    id: number;
    name: string;
    email: string;
    address: {
      street: string;
      suite: string;
      city: string;
      zipcode: string;
      geo: {
        lat: string;
        lng: string;
      };
    };
    phone: string;
    website: string;
    company: {
      name: string;
      catchPhrase: string;
      bs: string;
    };
  }
  
  export interface userError {
    cod: string;
    message: string;
  }
  
  export interface UserState {
    data: UserData | null;
    loading: boolean;
    error: string;
  }
  
  interface GetUserAction {
    type: typeof GET_DETAILS;
    payload: UserData;
  }
  
  interface SetLoadingAction {
    type: typeof SET_LOADING;
  }
  
  interface SetErrorAction {
    type: typeof SET_ERROR;
    payload: string;
  }
  
  export type UserAction = GetUserAction | SetLoadingAction | SetErrorAction;
  
  export interface AlertAction {
    type: typeof SET_ALERT;
    payload: string;
  }
  
  export interface AlertState {
    message: string;
  }
  </code></pre>
  <p>loginAction.ts</p>
  <pre><code>import { ThunkAction } from &quot;redux-thunk&quot;;
  import { RootState } from &quot;..&quot;;
  import {
    UserAction,
    GET_DETAILS,
    SET_LOADING,
    SET_ERROR,
    UserData
  } from &quot;../types&quot;;
  
  export const getUser = (
    name: string
  ): ThunkAction&lt;void, RootState, null, UserAction&gt; =&gt; {
    return async (dispatch) =&gt; {
      try {
        const res = await fetch(`https://jsonplaceholder.typicode.com/users`);
        const resData: UserData = await res.json();
        console.log(resData);
  
        dispatch({
          type: GET_DETAILS,
          payload: resData
        });
      } catch (err) {
        dispatch({
          type: SET_ERROR,
          payload: err.message
        });
        console.log(err);
      }
    };
  };
  
  export const setLoading = (): UserAction =&gt; {
    return {
      type: SET_LOADING
    };
  };
  
  export const setError = (): UserAction =&gt; {
    return {
      type: SET_ERROR,
      payload: &quot;&quot;
    };
  };
  </code></pre>
  <p>User.tsx</p>
  <pre><code>import React, { FC } from &quot;react&quot;;
  import styled from &quot;styled-components&quot;;
  import { UserData } from &quot;../store/types&quot;;
  
  interface UserProps {
    data: UserData;
  }
  
  const User: FC&lt;UserProps&gt; = ({ data }) =&gt; {
    return (
      &lt;&gt;
        &lt;p&gt;Name : {data.name}&lt;/p&gt;
        &lt;p&gt;ID: {data.id}&lt;/p&gt;
        &lt;p&gt;Email: {data.email}&lt;/p&gt;
        &lt;p&gt;Address: {data.address}&lt;/p&gt;
  
        &lt;p&gt;{data.company}&lt;/p&gt;
        &lt;p&gt;{data.phone}&lt;/p&gt;
        &lt;p&gt;{data.website}&lt;/p&gt;
      &lt;/&gt;
    );
  };
  
  export default User;
  </code></pre>