Using boolean operators with ternary operators in javascript

Question

NB: Someone please explain how to format my code here, it just doesn't work, Im doing it wrong or something.

Here is my code after refactoring according to comments, it now works!

import React, { useState, useEffect } from 'react'
import axios from 'axios'
const App = () => {
    const [countries, setCountries] = useState([])
    useEffect(() => {
        console.log('effect');
        axios
            .get('https://restcountries.eu/rest/v2/all')
            .then(response => {
                console.log('promise fulfilled');
                const countries = response.data
                setCountries(countries)
            })
    }, [])
    const [searchVal, setSearchVal] = useState('')
    const searchOnChangeEventHandler = (event) => setSearchVal(event.target.value)
    const filteredCountries = (searchVal, countries) => countries.filter(country => country.name.toLowerCase().includes(searchVal.toLowerCase()))
    const filteredCountriesLength = filteredCountries(searchVal, countries).length
    return (
        <div>
            <h1>coutries data</h1>
            <div>
                <input
                    type='text'
                    placeholder='search countries'
                    value={searchVal}
                    onChange={searchOnChangeEventHandler}
                >
                </input>
            </div>

            <div>
                <>
                    {
                        countries.length
                            ? (searchVal
                                ? (
                                    filteredCountriesLength <= 10 && filteredCountriesLength > 1
                                        ? filteredCountries(searchVal, countries).map(country => <p key={country.name}>{country.name}</p>)
                                        : <span>{filteredCountriesLength} matches! too many matches, specify another filter...</span>
                                )
                                : <span>type to search..</span>)
                            : <span>populating countries data...</span>
                    }
                </>
            </div>
        </div >
    )
}
export default App

The following piece now works the way I wanted it to, after I cleaned up the code, I think its better to use if-else and then convert to ternary as suggested.


        <div>
            <>
                {
                    countries.length
                        ? (searchVal
                            ? (
                                filteredCountriesLength <= 10 && filteredCountriesLength > 1
                                    ? filteredCountries(searchVal, countries).map(country => <p key={country.name}>{country.name}</p>)
                                    : <span>{filteredCountriesLength} matches! too many matches, specify another filter...</span>
                            )
                            : <span>type to search..</span>)
                        : <span>populating countries data...</span>
                }
            </>
        </div>

NB: Is there a way to strip all this white-space in the code?

I wanted to print type to search whenever the searchVal input was empty.

Even if you get it working somehow, the result will be hardly maintainable. Consider moving this part to a separate function or a component. — georg
– georg, Commented Apr 20, 2021 at 12:44
Usually I just do many if statements in normal if(){} and then I change it to ternary — Sowam
– Sowam, Commented Apr 20, 2021 at 12:46

Vilfred Dreijer · Accepted Answer · 2021-04-20 12:48:25Z

2

I'm not completely sure about what you're asking for but I think it would help you by moving the ternaries into a function like:

const handleRender = () => {
  const length = filteredCountries(searchVal, countries)?.length

  if (length) {
    if (length <= 10) {
      return filteredCountries(searchVal, countries).map(country => <p key={country.name}>{country.name}</p>)
    } else {
      return <span>please be more specific, add filter...</span>
    }
  } 

  return <span>populating countries data...</span>
}

// render
{handleRender()}

answered Apr 20, 2021 at 12:48

Vilfred Dreijer

1429 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Heretic Monkey Over a year ago

In the future, just edit your previously deleted answer and undelete it.

utsavojha95 Over a year ago

how would i add an if else to print 'type to search' when searchVal is an ''

Vilfred Dreijer Over a year ago

@utsavojha95 it depends on what takes precedence, if you want to show "type to search" no matter what, even if you have filteredCountries, i would add a check above if (length) and check if(searchVal === '') return <span>Type to search</span>

Collectives™ on Stack Overflow

Using boolean operators with ternary operators in javascript

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related