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.

Answer 1

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()}