Sorting by field my Airtable API on React

I am extracting a database of children’s books via Airtable API.

This is my code so far(hiding my API KEY). It renders every book, but in a random order. I want to sort them by year.

I am trying to follow the documentation from Airtable, which demonstrates the code to sort by multiple fields. I don’t really know where to place this code in my original code, and how to adapt it. Thanks for your help!

import Hero from '../components/Hero';

class News extends Component {

  constructor(props) {
    this.state = {
      books: [],

  componentDidMount() {
    .then((resp) => resp.json())
    .then(data => {
       this.setState({ books: data.records });
    }).catch(err => {
      // Error :(

  render() {
    return (
      <><Hero title="Children's Books"/>
      <div className="container mt-5">
        <div className="row">
          <div className="col">
            <div className="new-container">
              { => <BookCard {} /> )}


const BookCard = ({ imageURL, title, year, description, rating, date }) => (
  <div className="card">
    <img className="card-img-top" src={imageURL[0].url} alt="Book cover" />
    <div className="card-body">
      <h5 className="card-title"><strong>{title} ({year})</strong></h5>
      <p className="card-text">
        <small className="text-muted">{date}</small>
      <p className="card-text">{description}</p>
      <p className="card-text"><strong>Rating: {rating}/5</strong></p>


export default News;

The documentation at explains how to include a sort in your request.

It looks like you are sending a curl request. With curl, you need to append the sort query parameters to your url.

For example, if you want to sort by year, with the most recent ones first …

You can create an array of sort objects like this:

[ {field: "year", direction: "desc"} ]

Then convert it to strings that look like this:


Then url encode the strings:


Then append them to your url with ? and &


Thank you for your help! It’s what I needed!

This topic was automatically closed 3 days after the last reply. New replies are no longer allowed.