I'm trying to capture wepb url from an axios response and pass it to an image component.

I want to loop through data and show every data[all].images.original.webp

I've tried .map() with no success

I think some of my problems involve waiting on the response to finish, and UserItem is probably all wrong

Here is the console.log I get during troubleshooting.

App

import React, { Component } from "react";
import axios from "axios";
import Users from "./components/Users";

class App extends Component {
  state = {
    users: [] /* Set users inital state to null */,
    loading: false
  };

  async componentDidMount() {
    this.setState({ loading: true });

    const res = await axios.get(
      "http://api.giphy.com/v1/stickers/search?q=monster&api_key=sIycZNSdH7EiFZYhtXEYRLbCcVmUxm1O"
    );

    /* Trigger re-render. The users data will now be present in 
       component state and accessible for use/rendering */
    this.setState({ users: res.data, loading: false });
  }

  render() {
    return (
      <div className="App">
          <Users loading={this.state.loading} users={this.state.users} />
          {console.log(this.state.users)}
        </div>
      </div>
    );
  }
}

export default App;

Users Component

import React, { Component } from "react";
import UserItem from "./UserItem";

export default class Users extends Component {
  render() {
    return (
      <div className="ui relaxed three column grid">
        {this.props.users.map(data => (
          <UserItem key={data.id} gif={data.images.original.webp} />
        ))}
      </div>
    );
  }
}

UserItem

import React from "react";
import PropTypes from "prop-types";

const UserItem = ({ user: { gif } }) => {
  return (
    <div className="column">
      <img src={gif} className="ui image" />
    </div>
  );
};

UserItem.propTypes = {
  user: PropTypes.object.isRequired
};

export default UserItem;

Error Message