π€·ββοΈMultiple Values Conditional Statement using useState
import { useState } from "react";
export default function App() {
const [initalValue, setInitalValue] = useState(["off"]);
const handleSubmit1 = () => {
setInitalValue("one");
{/* Render the div 1 */}
};
const handleSubmit2 = () => {
setInitalValue("one");
{/* Render the div 2 */}
};
return (
<>
{/* Render the div only if initalValue = one */}
{initalValue.includes("one") && (
<div>
{/* Your content goes here */}
This is the div to be shown when value is one.
</div>
)}
{/* Render the div only if initalValue = two */}
{initalValue.includes("two") && (
<div>
{/* Your content goes here */}
This is the div to be shown when value is two.
</div>
)}
<button type="button" onClick={handleSubmit1}>
Render Div - 1
</button>
<button type="button" onClick={handleSubmit2}>
Render Div - 2
</button>
</>
);
}
Last updated