score:0

import React from "react";
import "./styles.css";

export default function App() {
  const [isShowBody, setIsSHowBody] = React.useState(false);

  const onClickHandler = () => {
    setIsSHowBody(isShowBody => !isShowBody);
  }

  return (
    <div className="main">
      <div className="content">
        <div className="content-header" onClick={onClickHandler}>
          <p>STEM</p>
        </div>
        { isShowBody && <div className="content-body">
          I am a STEM
          <br></br>
          I am STEM
        </div>}
      </div>
    </div>
  );
}

score:0

import {React,useState} from "react";
import "./styles.css";

export default function App() {
  const [open,setOpen] = useState([false,false,false]);

  const toggle = (i) => {let copyOpen = open; open[i] = !open[i] ;setOpen(copyOpen)}

  return (
    <div className="main">
      <div className="content">
        <div className="content-header" onClick={()=>toggle(0)}>
          <p>STEM</p>
        </div>
        {open[0]?

        <div className="content-body">
          I am a STEM
          <br></br>
          I am STEM
        </div>:null
       }
        <div className="content-header" onClick={()=>toggle(1)}>
          <p>STEM</p>
        </div>
        {open[1]?

        <div className="content-body">
          I am a STEM
          <br></br>
          I am STEM
        </div>:null
       }
        <div className="content-header" onClick={()=>toggle(2)}>
          <p>STEM</p>
        </div>
        {open[2]?

        <div className="content-body">
          I am a STEM
          <br></br>
          I am STEM
        </div>:null
       }
      </div>

    </div>
  );
}

Related Query

More Query from same tag