React: Summary of useful Array Methods
I see a lot of React beginners having problems with functional programming methods when working on the state of an array.
In the end, we need three operations, like the C, U, D in CRUD:
- Creating new data / adding data to the array
- Deleting / removing data from the array
- Updating data in the array
From a functional standpoint,
- Creating is using existing data and concating it with other data:
concat
- Deleting is using existing data and filtering out the (un)needed data:
filter
- Updating is using existing data and mapping it onto something new:
map
const origNumbers = [1, 2, 3];
// creating new data => add the number 4
const addedNewNumber = origNumbers.concat(4); // [1,2,3,4]
// deleting data => remove even numbers
const removedSomeNumbers = origNumbers.filter((number) => number % 2); // [1,3]
// updating data => update number by adding 1 to it
const numbersPlusOne = origNumbers.map((number) => number + 1); // [2,3,4]
Dev Tools
We can use $
instead of document.querySelector
and $$
instead of document.querySelectorAll
.
That's not related to the jQuery $.
Example:
// old
document.querySelectorAll(".myClass");
// new
$$(".myClass");
Top comments (0)