how to use switch case in react
xxxxxxxxxx
{(() => {
switch (age) {
case 1:
return <age1 />
}
})()}
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>
);
};
xxxxxxxxxx
/* Hint: Use JS IIFE (Immediately invoked function expression) in JSX */
import React from 'react';
import ListView from './ListView';
import TableView from './TableView';
function DataView({
currView,
data,
onSelect,
onChangeStatus,
viewTodo,
editTodo,
deleteTodo,
}) {
return (
<div>
{(function () {
switch (currView) {
case 'table':
return (
<TableView
todos={data}
onSelect={onSelect}
onChangeStatus={onChangeStatus}
viewTodo={viewTodo}
editTodo={editTodo}
deleteTodo={deleteTodo}
/>
);
case 'list':
return (
<ListView
todos={data}
onSelect={onSelect}
onChangeStatus={onChangeStatus}
viewTodo={viewTodo}
editTodo={editTodo}
deleteTodo={deleteTodo}
/>
);
default:
break;
}
})()}
</div>
);
}
export default DataView;