title: How to cross reference IDs from API responses
body: <p>I have two API responses. One is an <strong>array of objects (Products)</strong> and another is <strong>a single object (User).</strong> Each Product has an ID property that corresponds to a userID inside of User. For each product I want to display a User's info (name, email) by matching userID to the ID that is in Product.</p>
  
  <p>I am attempting to do this by passing a property called userID from the parent, <strong>OrderList</strong>, to the child, <strong>UserInfo.</strong></p>
  
  <pre><code>export class OrderList extends React.Component {
    componentDidMount() {
      this.props.fetchOrdersAndUsers();
    }
  
    renderList() {
      return this.props.orders.map(order =&gt; {
        return (
          &lt;div key={order.orderId}&gt;
            &lt;h3&gt;{order.name}&lt;/h3&gt;
            &lt;UserInfo userId={order.id} /&gt;
          &lt;/div&gt;
        );
      });
    }
  
    render() {
      return &lt;div&gt;{this.renderList()}&lt;/div&gt;;
    }
  }
  
  const mapStateToProps = state =&gt; {
    return {
      orders: state.theOrders.ordersArr
    };
  };
  </code></pre>
  
  <p>I have an action that should fetch me a single user by passing it an ID. And another Action that should fetch all Orders and 1 user. (There is no endpoint to fetch all users at once)</p>
  
  <pre><code>export const fetchUser = id =&gt; {
    return async dispatch =&gt; {
      const results = await user.get(`/users/${id}`);
  
      dispatch({ type: 'FETCH_USER', payload: results.data.user });
    };
  };
  
  export const fetchOrdersAndUsers = (dispatch, getState) =&gt; {
    return async (dispatch, getState) =&gt; {
      await dispatch(fetchOrders());
  
      const allOrders = getState().theOrders.ordersArr;
      allOrders.forEach(order =&gt; {
        return dispatch(fetchUser(order.id));
      });
    };
  };
  </code></pre>
  
  <p>Inside my UserInfo component I passed the userID property from the parent to the fetchUser function but i get errors</p>
  
  <pre><code>class UserInfo extends React.Component {
    render(){
      return (
        &lt;div&gt;
          &lt;h4&gt;{this.props.userId}&lt;/h4&gt; 
          &lt;p&gt;{this.props.fetchUser(this.props.userId).name}&lt;/p&gt; // doesn't work
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>How can I extract the ID from product match it with the correct userId?</p>