Destructuring Props in React

When I first learned about destructuring with JavaScript, I was hesitant to incorporate it into my React apps. I found the syntax off-putting, and I wasn’t bothered by the repetition in my code.

But destructuring is really a simple concept that can make code more readable and clear, especially when passing down props in React.

What is destructuring?

Destructuring was introduced in ES6. It’s a JavaScript feature that allows us to extract multiple pieces of data from an array or object and assign them to their own variables.

Imagine you have a person object with the following properties:

const person = {
  firstName: "Lindsay",
  lastName: "Criswell",
  city: "NYC"
}

Before ES6, you had to access each property individually:

console.log(person.firstName) // Lindsay
console.log(person.lastName) // Criswell
console.log(person.city) // NYC

Destructuring lets us streamline this code:

const { firstName, lastName, city } = person;

is equivalent to

const firstName = person.firstName
const lastName = person.lastName
const city = person.city

So now we can access these properties without the person. prefix:

console.log(firstName) // Lindsay
console.log(lastName) // Criswell
console.log(city) // NYC

Destructuring props

Destructuring really shines in React apps, where it can greatly simplify how you write props. Take for example an <Attraction />component from a travel app I built. I wanted to pass it auth and attraction props that look like this:

 props = {  
    attraction: {
      address1: "350 5th Ave",
      address2: "",
      average_rating: 4,
      city: "New York",
      country: "US",
      display_address: ["350 5th Ave", "New York, NY 10118"],
      id: 9,
      latitude_coordinate: "40.748442285082",
      location: {
        created_at: "2018–03–07T03:56:20.717Z",
        id: 1,
        latitude_coordinate: 40.712775,
        longitude_coordinate: -74.005973,
        ...
      }
    },
    auth: {
      loggedIn: true,
      loggingIn: false,
      ...
    } ...
  }

Not only is this way more information than I need in my <Attraction />component, it makes for some pretty ugly JSX when I needed to pass down different pieces of props to children components.

const Attraction = props => {
  return (
    <div auth={props.auth} key={props.attraction.id}>
      <Link
        auth={props.auth.token}
        to={`/attractions/${props.attraction.url_name}`}
        key={props.attraction.id}
      >
        <img 
          alt={props.attraction.name} 
          src={props.attraction.image_url} 
        />
        <h1>{props.attraction.name}</h1>
      </Link>
      <StarRatings rating={props.attraction.average_rating} />
    </div>
  );
};

Destructuring our props lets us drop all of the props.

const Attraction = ({ auth, attraction }) => {
  return (
    <div auth={auth} key={attraction.id}>
      <Link
        token={auth.token}
        to={`/attractions/${attraction.url_name}`}
        key={attraction.id}
      >
        <img alt={attraction.name} src={attraction.image_url} />
        <h1>{attraction.name}</h1>
      </Link>
      <StarRatings rating={attraction.average_rating} />
    </div>
  );
};

We can make this code even simpler by destructuring the auth and attractions props like so:

const Attraction = ({
  auth, 
  auth: { token },
  attraction: { id, url_name, name, image_url, average_rating }
}) => {
  return (
    <div auth={auth} key={id}>
      <Link token={token} to={`/attractions/${url_name}`} key={id}>
        <img alt={name} src={image_url} />
        <h1>{name}</h1>
      </Link>
      <StarRatings rating={average_rating} />
    </div>
  );
};

Notice the syntax for destructuring the the auth props: auth, auth: { token }. This gives us access to both the whole auth object and its token, which we need for different children components.

Class Components

Destructuring works similarly in class components, with slightly different syntax. Here you destructure props in the render() function.

class Attraction extends React.Component {
  render() {
    const {
      auth,
      auth: { token },
      attraction: { id, url_name, name, image_url, average_rating }
    } = this.props;
return (
      <div auth={auth} key={id}>
        <Link token={token} to={`/attractions/${url_name}`} key={id}>
          <img alt={name} src={image_url} />
          <h1>{name}</h1>
        </Link>
        <StarRatings rating={average_rating} />
      </div>
    );
  }
}

Destructuring props made this code much DRYer and easier to read. It has the added benefit of giving us access only to the props we need, and letting us view them on the file where we use them.

Sources:

Learn the basics of destructuring props in React

A Dead Simple intro to Destructuring JavaScript Objects