Show and hide div in react js-CodePudding

How do I hide my page "section" when I click on a button. and show it another button is clicked Here's my code

import './App.css';
import Typed from 'react-typed';
import { useState, useEffect } from 'react';
function App() {
  return (
    <div className='text-white'>
      <div id='index' className='index max-w-[800px] mt-[-96px] w-full h-screen mx-auto text-center flex flex-col justify-center'>
        <div className='flex justify-center items-center'>
          <h1 className='md:text-7xl sm:text-6xl text-4xl font-bold md:py-6'>Roll</h1>
          <Typed 
          className="md:text-7xl sm:text-6xl text-4xl font-bold md:py-6 text-gray-400"
          strings={['simply', 'design']} 
          typeSpeed={70} 
          backSpeed={100} 
          loop/>
        </div>
        <p className='md:text-3xl sm:text-2xl text-xl font-bold py-4 '>best <a className='underline text-gray-300'>design</a> and <a className='underline text-gray-300'>simplistic.</a></p>
        <button className='bg-white text-black w-[200px] transition-[0.5s] rounded-lg font-bold my-6 mx-auto py-3 ring-2 ring-gray-300 hover:bg-slate-300  hover:shadow-xl hover:shadow-white hover:scale-110 '>Create</button>//clicking this button will show the div below which has the id of info and hide this current div
      </div>
      <div id='info' className='info max-w-[800px] mt-[-96px] w-full h-screen mx-auto text-center flex flex-col justify-center'>
        <h1>Hello</h1>
      </div>
      <div id='ino' className='info max-w-[800px] mt-[-96px] w-full h-screen mx-auto text-center flex flex-col justify-center'>
        <h1>Hello</h1>
      </div>
    </div>
  );
}

how do i make the onClick event work it out?

CodePudding user response：

You should use useState() react hook.

For example:

import './App.css';

function App() {
  
  const [visible, setVisible] = useState(true);

  return (
    <div className='text-white' style={{display: visible ? 'block' : 'none'}}>
      <div>
        <!--first part-->
        <div className='flex justify-center items-center'>
          <h1 className='md:text-7xl sm:text-6xl text-4xl font-bold md:py-6'>Web</h1>
          <!--stuff here-->
        </div>
        <p>stuff here</p>
        <button onClick={() => setVisible(!visible)}>Create</button>
        <!--when i click on the button it will hide the first part(section) and show the second part -->
      </div>
      <!--first part end -->
      <div>
        <!--second part -->
        <h1>Hello</h1>
      </div>
  </div>
);

You could check more details how to use useState() hook here https://reactjs.org/docs/hooks-state.html

CodePudding user response：

Just set a state let's call it for example hide and set default value false, and on the button click turn it to true.

And you can conditionally hide the button section and show the info section.

import "./App.css";
import Typed from "react-typed";
import { useState, useEffect } from "react";
function App() {
  const [hide, setHide] = useState(false);
  return (
    <div className="text-white">
      {!hide ? (
        <div
          id="index"
          className="index max-w-[800px] mt-[-96px] w-full h-screen mx-auto text-center flex flex-col justify-center"
        >
          <div className="flex justify-center items-center">
            <h1 className="md:text-7xl sm:text-6xl text-4xl font-bold md:py-6">
              Roll
            </h1>
            <Typed
              className="md:text-7xl sm:text-6xl text-4xl font-bold md:py-6 text-gray-400"
              strings={["simply", "design"]}
              typeSpeed={70}
              backSpeed={100}
              loop
            />
          </div>
          <p className="md:text-3xl sm:text-2xl text-xl font-bold py-4 ">
            best <a className="underline text-gray-300">design</a> and{" "}
            <a className="underline text-gray-300">simplistic.</a>
          </p>
          <button
            className="bg-white text-black w-[200px] transition-[0.5s] rounded-lg font-bold my-6 mx-auto py-3 ring-2 ring-gray-300 hover:bg-slate-300  hover:shadow-xl hover:shadow-white hover:scale-110"
            onClick={() => setHide(true)}
          >
            Create
          </button>
          //clicking this button will show the div below which has the id of
          info and hide this current div
        </div>
      ) : (
        <div
          id="info"
          className="info max-w-[800px] mt-[-96px] w-full h-screen mx-auto text-center flex flex-col justify-center"
        >
          <h1>Hello</h1>
        </div>
      )}
      <div
        id="ino"
        className="info max-w-[800px] mt-[-96px] w-full h-screen mx-auto text-center flex flex-col justify-center"
      >
        <h1>Hello</h1>
      </div>
    </div>
  );
}