Programming Tutorials

Three dots ... - Spread syntax in React Native

By: Nirmal in React-Native Tutorials on 2023-04-11  

In React Native, the three dots (...) are used to spread the contents of an array or an object. This is called the spread syntax.

When used with an array, the spread syntax creates a new array with the elements of the original array, followed by the elements in the spread argument. For example:

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const newArr = [...arr1, ...arr2];
console.log(newArr); // [1, 2, 3, 4, 5, 6]

When used with an object, the spread syntax creates a new object with the properties of the original object, followed by the properties in the spread argument. For example:

const obj1 = { foo: 'bar', baz: 42 };
const obj2 = { xyz: 'quux', foo: 'baz' };
const newObj = { ...obj1, ...obj2 };
console.log(newObj); // { foo: 'baz', baz: 42, xyz: 'quux' }

The spread syntax is useful when working with arrays or objects that you want to merge or clone without modifying the original data.






Add Comment

* Required information
1000

Comments

No comments yet. Be the first!

Most Viewed Articles (in React-Native )

Remove all installed dependencies and install them again

use axios in Expo to call APIs

Start background location tracking after login in expo react native

'import' and 'export' may only appear at the top level - React Native

Session variables in React Native - Expo

disable the back arrow in the header of a screen in a React Navigation Stack Navigator

react-native-background-job alternative in expo app

set up a global error handler in React Native (expo)

Error Handling in TextInput - React Native

react-native-android-location-services-dialog-box alternative in expo

npm install vs npx expo install

Some dependencies are incompatible with the installed expo version:

loadAsync() vs useFonts() in expo - react native

flexDirection in React Native

expo-secure-store to store sensitive data securely in React Native

Latest Articles (in React-Native)

Session variables in React Native - Expo

use axios in Expo to call APIs

Start background location tracking after login in expo react native

set up a global error handler in React Native (expo)

SafeAreaView in React Native

Some dependencies are incompatible with the installed expo version:

disable the back arrow in the header of a screen in a React Navigation Stack Navigator

react-native-android-location-services-dialog-box alternative in expo

Error Handling in TextInput - React Native

react-native-background-job alternative in expo app

'import' and 'export' may only appear at the top level - React Native

OpenType (OTF) vs TrueType (TTF)

loadAsync() vs useFonts() in expo - react native

expo-secure-store vs expo-file-system in expo - react native

Send push notifications to android/ios sample code using expo - react native