AvantGarde.js

import React, { Component } from "react";
import client from "../../sanity/api";
import "./avantGarde.scss";

const query = `*[_type == "photos" && categories[]-> title match "Avant*"] {
    _id,
    album,
    "imageUrl":  mainImage.asset->url,
    title
  }[0...50]
  `;

class AvantGarde extends Component {
  constructor() {
    super();
    this.state = {
      photos: []
    };
  }
  componentDidMount() {
    client.fetch(query, {}).then(photos => this.setState({ photos }));
  }
  render() {
    const { photos } = this.state;
    return (
      <div className="album_container">
        <ul>
          {photos.map(photo => (
            <li key={photo._id}>
              <img src={photo.imageUrl} alt={photo.Title} />
            </li>
          ))}
        </ul>
      </div>
    );
  }
}

export default AvantGarde;

Working with Sanity.io back end.