How To Use A Condition Inside The Map() In React

Posted on by Brent Johnson
Use a condition inside map() in React

If you are learning React, you must often work with the logic condition. So how to use a condition inside map() in React? Let’s go into detail.

Use a condition inside map() in React

Solution 1: Use if/else statement

First, array map() method will return a new array by calling a callback function every time loop over the array element.

Syntax:

array.map(function(currentValue,index,array),thisValue)

Parameters:

  • Function(): a function that call with each array element
  • currentValue: value of current array element
  • index: index of the current array element
  • array: the current array
  • thisValue: use as this value

So we will pass the condition within function() parameters.

Example:

import { useState } from 'react'
const anArray = [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20]
const odd =[]
const even=[]
anArray.map((ele)=>{
 if (ele%2!=0){
 
 odd.push(ele)}
 else {
  even.push(ele)
 }
})
 
console.log({odd})
console.log({even})
 
function App() {  
 
 return (
  <div >
 
  </div>
 )
}
 
export default App

Output:

{odd: Array(10)}
odd: (10) [1, 3, 5, 7, 9, 11, 13, 15, 17, 19]
[[Prototype]]: Object
{even: Array(11)}
even: (11) [0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20]
[[Prototype]]: Object

Here I create an array and then use the if/else statement within the map() method to filter that array. Then, I push into odd and even arrays for each type.

Solution 2: Use a conditional (ternary) operator

The Conditional (ternary) operator looks like this:

Condition ? expressA : expressB

Here if the condition is true, then expressA will be called. It is filthy exoressB will be called.

Example:

import { use state } from 'react'
const anArray = [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20]
const odd =[]
const even=[]
anArray.map((ele)=>{
ele%2==0?odd.push(ele):even.push(ele)
})
 
console.log({odd})
console.log({even})
 
function App() {  
 
 return (
  <div >
 
  </div>
 )
}
 
export default App

Output:

{odd: Array(11)}
odd: (11) [0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20]
[[Prototype]]: Object
 
{even: Array(10)}
even: (10) [1, 3, 5, 7, 9, 11, 13, 15, 17, 19]
[[Prototype]]: Object

Here I replace if/else statement with ternary operator. It also works like if/else statement. You can check by your logic then give express follow that logic. Remember, this ternary operator can only use when you have one condition. If you have more than one, you should use the if/else statement like this code below:

function App() {
const anArray = [0,1,2,3,4,5,6,7,8,9,10]
const result=anArray.map((ele)=>{
 if (ele == 0){
  return 0
 }
 else if (ele %2==0){
  return 'even'
 }
 else return 'odd'
})
console.log(result)
 
 return (
  <div className="App">
   
  </div>
 )
}
 
export default App

Output:

(11) [0, 'odd', 'even', 'odd', 'even', 'odd', 'even', 'odd', 'even', 'odd', 'even']

Summary

In this tutorial, I showed and explained how to use a condition inside the map() in React. You can use the if/else statement or a conditional (ternary) operator if you have only one conditional. If you have any problems, please comment below. Thank you for your reading!

Maybe you are interested:

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *