React deconstruct a single prop whilst maintaining the other props

You may or may not know you can deconstruct props. In the shortest possible explanation, deconstructing allows you to extract information from an element and saving that in its own variable.

For example, the below code would give me two variables “name” and “location”

const  Person = { name: 'Chris', location: 'UK'}

const { name, location } = Person; 

Moving this on, you can deconstruct from within components.

const functionalComponent  = (Person) => {}
// becomes 
const functionalComponent  = ({name, location}) => {}

Say I had another prop though, it would be…

const functionalComponent  = (Person, AnotherPerson) => {}
// becomes 
const functionalComponent  = ({Person: {name, location}, AnotherPerson}) => {}

I deconstruct my first prop whilst maintaining the integrity of the second prop.

Categories: JavascriptReact