React Conditional Rendering using switch

Question

I want to render a component based on props passed by the parent component, then in the children component i evaluate the props using switch statement. I was unable to get return element based on props.length. I have searching for the way using conditional rendering properly in react, but it seems something in my code goes wrong and i didnt realize it until now.

//Countries.tsx
import React from "react";
import ListCountries from "./ListCountries";
import Country from "./Country";

const Countries = ({ data }) => {
  let dataLength = data.length;
  let component = null;
  switch (dataLength) {
    case dataLength === 1:
      component = <Country data={data} />;
      break;
    case dataLength > 1:
      component = <ListCountries data={data} />;
      break;
    case dataLength > 10:
      component = <div>Too many matches, specify another filter</div>;
      break;
    default:
      component = <p>Else statement</p>;
      break;
  }

  return <>{component}</>;
};

export default Countries;

export default function App() {
  const [countries, setCountries] = useState([]);
  const [filteredCountries, setFilteredCountries] = useState([]);
  const [query, setQuery] = useState(undefined);

  useEffect(() => {
    axios.get("https://restcountries.eu/rest/v2/all").then(res => {
      setCountries(res.data);
    });
  }, [query]);

  const inputSearchHandler = e => {
    setQuery(e.target.value);
    const res = countries.filter(country =>
      country.name
        .toLocaleUpperCase()
        .includes(e.target.value.toLocaleUpperCase())
    );
    setFilteredCountries(res);
  };

  console.log("countries : ", countries);
  console.log("countries length: ", countries.length);
  console.log("filtered : ", filteredCountries);
  console.log("filtered length: ", filteredCountries.length);
  return (
    <div className="App">
      <SearchField inputSearchHandler={inputSearchHandler} />
      <Countries data={filteredCountries} />
    </div>
  );
}```

Pardon me, it keeps evaluate to the default on switch statement, so the Countries component always render <p>Else statement</p>. Full in codesandbox here : codesandbox.io/s/react-conditional-rendering-sccwn?file=/src/… — Achmad Wahyu
– Achmad Wahyu, Commented Jul 27, 2020 at 6:11

Wai Ha Lee · Accepted Answer · 2020-07-27 13:42:33Z

There are a few things wrong with your code but I was able to get it to work:

the switch statement isn't built for "greater than" / "less than" statements. Usually, switch is used like this:
```
 switch(number) {
     case 1: dothis();
     case 2: dothat();
 }
```
there is a workaround, you could do this:
```
 switch(true) {
     case number > 1: dothis();
     case number < 1: dothat();
 }
```
but i would stick to if, else if and else statements.
You made a small error in this line:
```
 case dataLength > 1:
       // do something
 case dataLength > 10:
       // do something else
```
If we assume dataLength is 11, it would still execute first case since the condition dataLength > 1 is true. To fix this, make sure to change the first statement to case dataLength > 1 && dataLength < 10
I did some minor changes to make the code more readable.

This is the final result:

import React from "react";
import ListCountries from "./ListCountries";
import Country from "./Country";

const Countries = ({ data }) => {
  const getComponent = () => {
    let dataLength = data.length;    
      if (dataLength === 1) return <Country data={data} />;
      else if (dataLength > 1 && dataLength < 10) return <ListCountries data={data} />;
      else if (dataLength > 10) return <div>Too many matches, specify another filter</div>;
      else return <p>Else statement</p>;    
  };

  return getComponent();
};

export default Countries;

Thanks for your help!, anyway, should i use if-else statement instead of switch if i'd like to render based on greater than / less than?. or using greater than / less than is not suggested in conditional rendering?
@AchmadWahyu I suggest you don't use greater than / less than in combination with switch. I usually use switch if I have a variable and I want to switch through the possible outcomes (for example if I have a variable that contains either 1, 2, 3, 4 or 5 I'd use switch case. But to be honest, it doesn't really matter. If else is fine

Collectives™ on Stack Overflow

React Conditional Rendering using switch

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related