Conditional Rendering of if else statements in React JS

March 18, 2024

Im currently practicing react JS, understanding concepts and the JS.

const ShowCountry = ({countries}) => {
    console.log(countries.length)
    if(countries.length <= 5){
        return (
            <>
                {countries.map(country => (
                    <p key={country.name.common}>{country.name.common}</p>
                ))
                }
            </>
        )
    } else if (countries.length === 1) {
        console.log('Does this else if renders if display limit is equal to 1')
        return (
          <>
            if else block 2 test
          </>
        )
    } else {
        return (<p>Too many matches, specify another filter</p>)
    }

}

export default ShowCountry

This is component receives a props {countries}.
This countries are array object data. Now the problem here is that I want to render components using conditional rendering based on the length of the countries data.
If countries data is more than 5, then it will render the else block and if the length is less than or equal to 5, then it will render the return statement. Both of these code blocks works fine, However this if else code block doesnt work:

 else if (countries.length === 1) {
        console.log('Does this else if renders if display limit is equal to 1')
        return (
          <>
            if else block 2 test
          </>
        )

Ive tried to observe the length if it matches === 1 using console.log but even if the .length === 1, it doesnt render the return statement.

Can you please recommend or give me an insight why it behaves like this?

>Solution :

you need to check for countries.length === 1 before checking for countries.length <= 5

const ShowCountry = ({ countries }) => {
  console.log(countries.length);
  if (countries.length === 1) {
    console.log('Does this else if renders if display limit is equal to 1');
    return (
      <>
        <p>If else block 2 test</p>
      </>
    );
  } else if (countries.length <= 5) {
    return (
      <>
        {countries.map((country) => (
          <p key={country.name.common}>{country.name.common}</p>
        ))}
      </>
    );
  } else {
    return <p>Too many matches, specify another filter</p>;
  }
};

export default ShowCountry;