React is a popular library for building user interfaces. It is a JavaScript based library, so it shouldn’t surprise you that React uses JavaScript methods. However, you may be surprised by the outsized role JS methods play in building apps in React.

Templating language JSX only allows you to embed JS expressions, but not statements. That is why React developers have learned to use methods to do things that would normally require statements. For example – filter() method to return some items of the array based on a condition, or map() to transform every item in the array.

Without further ado, let’s look at JavaScript methods we commonly use when building apps in React.

map()

The most useful method in React. Map() was introduced in ES6, and has become one of the most common methods I use when building apps with React.

Often your app receives data formatted as array of objects. You have to use data from each object to create a component or an element to display the data. That’s where map() comes in. It allows you to access data of every object in the array and pass it as props, content, or even styles for new elements and components.

Great thing about map() is that it returns a new array consisting of transformed elements. So you can embed it inside JSX and it will work. You can not embed switch statement in React.

Keep in mind that when using map() to render same component multiple times, you’ll need to ass an unique key value to every instance of a component. This allows React to keep track of every individual DOM element. Fortunately, map() also accepts second optional argument index. This is the index of the array item currently in iteration. You can pass index as key attribute, so every element will have a unique identifier.

map() is especially useful because it allows you to do things like rendering components for every item in the array. This would take multiple lines without map()

filter()

filter() method is similar to map. It can be embedded inside JSX and returns a new array, so you can use it to render multiple components. It even accepts the same callback function argument. One important difference is that filter() does not return every item from the original array. But only items that pass the condition specified in the callback function.

For instance, a callback function might return a condition that checks if a number (item in the array) is higher than 5. If it is, the item ends up in the new array.

Personally, I often use filter() when I want to conditionally render elements or components for every item in the array.

Without filter() method, I’d have to write a for statement to check every item in the array. Then push selected items into a new array. filter() saves me from writing multiple lines of unnecessary code.

forEach()

This method is essentially a method form of a common operation in JavaScript – do something for every item in the array. Unlike map(), forEach does not return a new array. In fact, it doesn’t return anything. So it’s not very useful to embed in JSX.

Instead forEach() is very useful for performing one-off side effects on items in the array.

find()

Another important, but often overlook method that is invaluable for developing apps with React. Find() allows you to find an item in the array that meets a requirement. Or you can use it to determine whether there are any elements that satisfy the requirement. If there are none, find returns undefined. Otherwise it returns the first value that meets the requirement.

Other sister methods of find() include findIndex() , which returns index of the array item that meets the requirement. indexOf() is also a well known method for searching strings or arrays to find if there are any matches for a value.

console.log()

Logging to the console is incredibly useful when building apps in React. First of all, it helps you keep track of the value you’re working with throughout lifecycle of the app. Inserting console.log() calls at strategic positions can also help you identify the error so you can fix the code.

console.log() is also very useful if you want to take a look at what kind of value you’re working with. I’ve found it useful in event handlers, where you might not understand instance of SyntheticEvent. Console.log() allowed me to look at the object and make sense of it. Now I know what I’m doing when I use event.target.value in React.

alert()

Similar to console.log(), you are not going to need alert() to implement any interactive features, but it is a nice method to test how your app is working. I often use alert() method in event handlers to confirm that they are set up correctly.

methods on the document interface

React provides many solutions on its own, but sometimes you still need to access some methods or properties from the document interface. For example, the scrollIntoView() method helps you scroll to a specific element.

Previously you also needed to access history API to programmatically redirect / navigate to another page. That is, you had to use push() method on a history object to change the URL. Newest versions of react-router provide a useNavigate hook to provide a navigate function that takes you to any specified relative URL.

Summary

New functions add very important features to React. They may be less readable than for or if/else statements you’re used to, but they can be embedded inside JSX. That is a huge advantage for readability and easy development.