Destructuring in React

const { name } = this.props
props = {
author: {
name: "David Sedaris",
residence: {
city: "Rackham",
province: "West Sussex"
}
},
review: "",
date: "April 08, 2021"
};
import React, { Component } from "react";class AuthorDetails extends Component {

render() {
const { author } = this.props;
const { residence } = author;
return (
<div>
...
</div>
);
}
}
export default AuthorDetails;
const { author: { residence: { city, province } } } = this.props;
return (
<div>
<p>City: {city}</p>
<p>Province: {province}</p>
</div>
);

Rest syntax

const { author, ...rest } = this.props;console.log(author); 
//{ name: "David Sedaris", residence: {…} }
console.log(rest);
//{ review: "", date: "April 08, 2021" }
const {...rest, author  } = props; 🛑
const { author, ...rest } = props; ✅

Variable renaming

const { author } = props;const { residence: origin, name: fullName } = author;console.log(origin);     
// { city: "Rackham", province: "West Sussex" }
console.log(fullName);
// "David Sedaris"

--

--

--

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Use Proxy To Easily Call Your APIs During Development

Interesting facts about Node.js

React Exercises — Part 1

How to implement the simplest search bar in React.js

Code the World Part 2 …

Introduction to React Native

How to use jQuery with React the right way

Things what I learned after 1 year in Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Marcus Siegel

Marcus Siegel

More from Medium

REACT HOOK(useState and useEffect)

How to fail a Frontend Dev Interview?

12 tips to help you debug your react application

React core concept