πŸ€·β€β™‚οΈ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