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:
- How to toggle a Boolean state in React
- Update nested properties in a State object in React
- Passing data from child to parent component in reactjs
- How to Map through an Object in React

Hello, guys! I hope that my knowledge in HTML, CSS, JavaScript, TypeScript, NodeJS, ReactJS, MongoDB, Python, MySQL, and npm computer languages may be of use to you. I’m Brent Johnson, a software developer.
Name of the university: HOU
Major: IT
Programming Languages: HTML, CSS, JavaScript, TypeScript, NodeJS, ReactJS, MongoDB, PyThon, MySQL, npm