Shorthand property names

Sometimes, there are variables in your code that you would like to put into an object.

const name = 'John';
const age = 25;
const gender = 'Male';

const Person = () => {
return (
<View>
<Text>Name: {name}</Text>
<Text>Age: {age}</Text>
<Text>Gender: {gender}</Text>
</View>
)
};
// Creating an object of variables 
const person = { name: 'John', age: 25, gender: 'Male' };

const Person = () => {
return (
<View>
<Text>Name: {person.name}</Text>
<Text>Age: {person.age}</Text>
<Text>Gender: {person.gender}</Text>
</View>
)
};

There is a shorter notation available to achieve the same:

const name = 'John';
const age = 25;
const gender = 'Male';

// Instead of doing this
// const person = { name: name, age: age, gender: gender };
// use shorthand property names
const person = { name, age, gender };

const Person = () => {
return (
<View>
<Text>Name: {person.name}</Text>
<Text>Age: {person.age}</Text>
<Text>Gender: {person.gender}</Text>
</View>
)
};

Subscribe?

Be the first to receive insightful articles and actionable resources that help you to elevate your skills.