Implement a switch in React

Let's assume that you want to render a switch function in React.

For example, let's assume that you want to display the price of a car depending on the user's selection:

jsx
import React, { useState } from 'react';

const App = () => {
    
    const [car, setCar] = useState('Tesla');
    
    return(
        <div className = 'App'>
            Selected brand price is:
            {
                {
                    
                    'Tesla': '75000',
                    'Mini':  '29900',
                    'Audi':  '37400'
                    
                }[car]
            }
        </div>
    );
    
}

export default App;

This is equivalent to:

javascript
let selection = (car) => {
    
    let res;
    
    switch(car){
        case 'Tesla': res = '75000'; break;
        case 'Mini':  res = '29900'; break;
        case 'Audi':  res = '37400'; break;
    }
    
    return res;
    
}

Understanding the code

To understand why the previous code is working as a switch, we can analyze it using vanilla JavaScript:

javascript
// Defining an object (acting as a switch)
let selection = {
    
    'Tesla': '75000',
    'Mini':  '29900',
    'Audi':  '37400'
    
}

// Defining model
let car = 'Tesla';

// Getting the price
let price = selection[car];

console.log(price); // 75000

We can get the same result in one line of code:

javascript
// We can get the same result in one line of code
// This is actually what we are doing in react
let price = {
    
    'Tesla': '75000',
    'Mini':  '29900',
    'Audi':  '37400' 
    
}['Tesla'];

console.log(price); //75000

This code works like the React example above.

Adding a default case

If we want to add a default case to the switch, we can use the || operator after the object declaration.

Let's look at the previous example to understand why:

javascript
let price = {
    
    'Tesla': '75000',
    'Mini':  '29900',
    'Audi':  '37400' 
    
}['Volkswagen'];

console.log(price); //undefined

As we didn't define the Volkswagen property, we'll get an undefined price.

Let's see how to solve it:

javascript
let price = {
    
    'Tesla': '75000',
    'Mini':  '29900',
    'Audi':  '37400' 
    
}['Volkswagen'] || 'Oops, there is no price for this brand';

console.log(price); // Oops, there is no price for this brand

Finally, in React:

jsx
import React, { useState } from 'react';

const App = () => {
    
    const [car, setCar] = useState('Tesla');
    
    return(
        <div className = 'App'>
            Selected brand price is:
            {
                {
                    
                    'Tesla': '75000',
                    'Mini':  '29900',
                    'Audi':  '37400'
                    
                }[car] || 'Oops, there is no price for this brand'
            }
        </div>
    );
    
}

export default App;

Using a switch like an object makes the code easy to understand and we avoid defining a new function.