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");