Skip to content
Related Articles

Related Articles

Alternatives of for loops and if-else blocks in ReactJS

Improve Article
Save Article
Like Article
  • Last Updated : 28 Nov, 2021

If you have ever tried to use for loop in React then you must be familiar with the error stating Unexpected token and the same error shows up if you use if conditions as well.

Pseudo Code:

import React from 'react'
import ReactDOM from 'react-dom'
import Component from "./Component"

function App() {
  return (
    <div>
        {
          for(let i =0 ; i< 5 ; i++)
             </Component>
        }
    </div>
}

const rootElement = document.getElementById('root')
ReactDOM.render(<App />, rootElement)

Explanation: Browser doesn’t understand react.js so webpack such as Babel converts React.js into JavaScript at compilation. Everything in React.js boils down to plain JavaScript. So if you write something in react.js which isn’t a valid JavaScript then you will get Compilation Error. The problem in the above code is that the return statement always expects a value but a for loop and if block does not return any value. So the alternatives of using these should return something.

Step 1: Creating React Application

npx create-react-app loops

Step 2: After creating your project folder i.e.loops, move to it using the following command:

cd loops

Project Structure: It will look like the following.

1. For Loop Alternatives: By using Map you can do almost anything that a for loop does. Also, Map returns an array so there won’t be any Compilation Error. Don’t forget to add a key prop while returning every component.

 Syntax: 

{ arr.map((parameter) => (//logic) )}

App.js




import React from 'react'
import ReactDOM from 'react-dom'
  
  
function App() {
const items = [1,2,3,4,5]
  return (
    <div>
      { items.map((item,index) => 
       (<div key={index}> Hello World {item} </div>) )}
    </div>
  )
}
  
export default App;

Step to run the application: Open the terminal and type the following command.

npm start

Output: Now open your browser and go to http://localhost:3000/ 

for loop but outside of return: Here we loop through the array outside of the return statement and store the array of components and then we render the array inside of the return statement.      

Syntax:

for(initialization; condition; updation) {  //logic }

App.js




import React from 'react'
import ReactDOM from 'react-dom'
  
  
function App() {
const items = [1,2,3,4,5]
let components = [] 
for(let i = 0 ; i < items.length ; i++ ){
  components.push(<div>Hello Word {items[i]}</div>)
}
  return (
    <div>
      {components}
    </div>
  )
}
  
export default App;

Step to run the application: Open the terminal and type the following command.

npm start

Output: Now open your browser and go to http://localhost:3000/ 

2. If-else block Alternative: Ternary Operator does the same thing that an if-else block does. If you just want an if condition check then you can write null in the else part.

Syntax:

{ (condition) ? true : false }

App.js

App.js




import React from 'react'
import ReactDOM from 'react-dom'
  
function App() {
const x = 12
  return (
    <div>
        {x % 2 === 0 ? (<h1>x is Even</h1>) : (<h1> x is Odd</h1>)}
    </div>
  )
}

Step to run the application: Open the terminal and type the following command.

npm start

Output: Now open your browser and go to http://localhost:3000/ 


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!