How to show one component and hide others using useState and useEffect? - reactjs

Question

I want to make a component in the front page that displays list of vehicles with navigation buttons that shows list of the selected button.
Is there a better way I could write this code below because I want the list of categories to be much longer? Or are there other methods I can use other than useState & useEffect? I'm using Next.js
const Vehicles = () => {
const [selectedCategory, setSelectedCategory] = useState("cars")
const [cars, setCars] = useState(true)
const [bikes, setBikes] = useState(false)
const [motorcycles, setMotorcyles] = useState(false)
const [scooters, setScooters] = useState(false)
useEffect(() => {
if (selectedCategory === "cars") {
setCars(true)
setBikes(false)
setMotorcyles(false)
setScooter(false)
}
if (selectedCategory === "bikes") {
setBikes(true)
setCars(false)
setMotorcyles(false)
setScooters(false)
}
if (selectedCategory === "motorcycles") {
setMotorcyles(true)
setCars(false)
setBikes(false)
setScooters(false)
}
if (selectedCategory === "scooters") {
setScooters(true)
setCars(false)
setBikes(false)
setMotorcyles(false)
}
}, [selectedCategory])
return (
<div>
<div>
<button onClick={() => setSelectedCategory("cars")}> Cars </button>
<button onClick={() => setSelectedCategory("bikes")}> Bikes </button>
<button onClick={() => setSelectedCategory("motorcycles")}> Motorcycles </button>
<button onClick={() => setSelectedCategory("scooters")}> Scooters </button>
</div>
{cars && (
<div>
<Cars />
</div>
)}
{bikes && (
<div>
<Bikes />
</div>
)}
{motorcycles && (
<div>
<Motorcycles />
</div>
)}
{scooters && (
<div>
<Scooters />
</div>
)}
</div>
);
};
export default Vehicles;

Answer 1

These things like abstraction and code refactor tend to differ from person to person. But what I would generally prefer is something between abstraction and readability. Since readability is much more important I would go along this way
const allCategory = {
cars: 0,
bikes: 1,
motorcycles: 2,
scooters: 3
}
const Vehicles = () => {
// set cars as default category. If you don't want it change it to be any integer before 0
const [category, setCategory] = useState(allCategory.cars)
return (
<div>
<div>
<button onClick={() => setCategory(allCategory.cars)}> Cars </button>
<button onClick={() => setCategory(allCategory.bikes)}> Bikes </button>
<button onClick={() => setCategory(allCategory.motorcycles)}> Motorcycles </button>
<button onClick={() => setCategory(allCategory.scooters)}> Scooters </button>
</div>
<div>
{category === allCategory.cars && <Cars />}
{category === allCategory.bikes && <Bikes />}
{category === allCategory.motorcycles && <Motorcycles />}
{category === allCategory.scooters && <Scooters />}
</div>
</div>
);
};
export default Vehicles;
If you want to go absolutely crazy. You can decrease this to be in about 4-5 lines in return statement. But I prefer this to be much cleaner

Answer 2

I think you could do something more like
const Vehicles = () => {
const [selectedCategory, setSelectedCategory] = useState("cars")
const renderCat = (category) =>{
switch(category){
case "cars":
return <Cars />
//etc...
}
}
return (
<div>
<div>
<button onClick={() => setSelectedCategory("cars")}> Cars </button>
<button onClick={() => setSelectedCategory("bikes")}> Bikes </button>
<button onClick={() => setSelectedCategory("motorcycles")}> Motorcycles </button>
<button onClick={() => setSelectedCategory("scooters")}> Scooters </button>
</div>
<div>
{renderCat(selectedCategory)}
</div>
</div>
);
};
export default Vehicles;

Answer 3

You could do like this:
const categories = [
{
name: "cars",
title: "Cars",
component: Cars
},
{
name: "bikes",
title: "Bikes",
component: Bikes
},
{
name: "motorcyles",
title: "Motorcyles",
component: Motorcyles
},
{
name: "scooters",
title: "Scooters",
component: Scooters
}
];
const Vehicles = () => {
const [selectedCategory, setSelectedCategory] = useState("cars")
return (
<div>
<div>
{categories.map(({ name, title }) => (
<button onClick={() => setSelectedCategory(name)}>
{title}
</button>
))}
</div>
{categories.map(({ component: Component, name }) => {
if(selectedCategory !== name) return;
return (
<div>
<Component />
</div>
);
})}
</div>
);
};
export default Vehicles;
The category objects can be different depending on what you want to display. Having both name and title is not essential, it's just an example.