Showing a list of elements happened almost in every project I was ever writing. And React really simplifies the rendering of lists inside the JSX by supporting the Javascript .map() method.
The .map() method in Javascript iterates through the parent array and calls a function on every element of that array. Then it creates a new array with transformed values. It doesn’t change the parent array.
Now, let’s imagine that you are creating a simple Todo App. The main element of your project will be a list of tasks. To show them, you will need data, which in most cases will be an array of elements, can be objects or strings, for example.
While you have the array with data, you can use the .map() method inside the JSX component the transform the data into the element.
Let’s take a look at the graphic and code.
const tasks = [
{text: "Buy flowers", status: "todo"},
{text: "Go to the dentist", status: "done"},
]
const tasksList = tasks.map(task => {
return (
<p>{task.text} - {task.status}</p>
) })
When creating a list of elements in a way you can see above, there’s one more necessary thing, and it’s a key.
key is a special attribute that you need to include in the element, and it should be a string. Keys in each list should be unique, which means that you shouldn’t use values that can be the same as the key. In other words, keys should be unique among the siblings, not globally.
For example, you should not use status or text as a key in our example.
Key is kind of the id for the element, and it helps React to identify which element was changed, added, or removed.
It’s a good practice to select a value that is a unique identifier for an item in the array, commonly it’s the ID.
Let’s modify our example.
const tasks = [
{id: "1", text: "Buy flowers", status: "todo"},
{id: "3", text: "Go to the dentist", status: "done"},
]
const tasksList = tasks.map(task => {
return (
<p key={task.id}>{task.text} - {task.status}</p>
) });
6 Use Case of Spread with Array in JavaScript Here are 6 ways to use the Spread operator with Array in JavaScript. You can use it to merge or clone an array. Or use it to convert iterables to an array.
Let’s say we have 2 arrays.
const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
Let’s see what happens when we try to merge the array without the spread syntax.
const attemptToMerge = [array1, array];
attemptToMerge; // [ [1, 2, 3], [4, 5, 6] ] 👈 😱
👆 When you try to merge an array without the spread syntax, you wind up with a nested or multi-dimensional array.
So let’s use the Spread syntax to “erase” the brackets.
const mergedArray = [ …array1, …array2 ];
mergedArray; // [ 1, 2, 3, 4, 5, 6 ] 👈 ✅ Nice flattened array
Cloning array in JavaScript isn’t as straight forward. So let’s see it done in 2 paths - the wrong way and the right way 🛣
const original = [‘zero’, ‘one’]; const newArray = […original];
original; // [‘zero’, ‘one’] newArray; // [‘zero’, ‘one’]
So if we did this correctly, our original array shouldn’t be affected if we changed the newArray. Alright, let’s give this a try 💪
newArray[1] = ‘💩’;
newArray; // [‘zero’, ‘💩’]
original; // [‘zero’, ‘one’] ✅ original array is NOT affected
With Spread, converting different data types to an Array has never been easier 👏
When we spread a string, it will return an array of individual substrings.
const string = ‘hi’;
const array = […string];
array; // [ ‘h’ , ‘i’ ]
Let’s create a new set object:
const set = new Set([1, 2, 3]);
set; // Set(3) {1, 2, 3}
Using Spread, we can convert the set into an array:
const array = […set];
array; // [1, 2, 3]
Let’s create a node list:
const nodeList = document.querySelectorAll(‘p’);
nodeList; // [p, p, p]
Now we can use Spread to convert our node list into an array:
const array = […nodeList];
array;
Before we begin, let’s take some time to understand what the arguments objects is.
MDN: arguments is an Array-like object accessible inside functions that contains the values of the arguments passed to that function.
👆 Notice the key there, array-like – So it looks like an array, but it isn’t (oh JS, always making things so fun for us to understand you 😅). The benefit of converting the arguments object to an array means we have access to all the awesome array methods (ie. map, filter, find) 👍