how to use switch case in react
xxxxxxxxxx
{(() => {
switch (age) {
case 1:
return <age1 />
}
})()}
xxxxxxxxxx
<div>
{{ beep: <div>Beep</div>,
boop: <div>Boop</div>
}[greeting] || <div>Hello world</div>}
</div>
Using Routes instead of Switch in react-router v6
You are using react-router-dom version 6, which replaced Switch with the Routes component.
xxxxxxxxxx
import {
BrowserRouter,
Routes, // instead of "Switch"
Route,
} from "react-router-dom";
// ...
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
</Routes>
</BrowserRouter>
xxxxxxxxxx
render () {
return (
<div>
<div>
{/* removed for brevity */}
</div>
{
{
'foo': <Foo />,
'bar': <Bar />
}[param]
}
<div>
{/* removed for brevity */}
</div>
</div>
)
}
xxxxxxxxxx
import React, { useState } from 'react';
import ReactSwitch from 'react-switch';
const SoundSwitch = () => {
const [isSoundOn, setSoundOn] = useState(false);
const handleSoundToggle = () => {
setSoundOn(!isSoundOn);
};
return (
<div>
<h2>Sound</h2>
<ReactSwitch
checked={isSoundOn}
onChange={handleSoundToggle}
/>
</div>
);
};