Debug School

rakesh kumar
rakesh kumar

Posted on • Updated on

How to add component on button click in react js

step 1: add a button

Image description

step2: add a state

  const [showComponent, setShowComponent] = useState(false);
Enter fullscreen mode Exit fullscreen mode

step3: while clicking button setshowcomponent to be true

  const handleClick = () => {
    setShowComponent(true);
  };
Enter fullscreen mode Exit fullscreen mode

import class
import { Allquestion } from "../Question"

Image description

Image description

OUTPUT

Image description

Image description

import React, { useState } from 'react';

const App = () => {
  const [showComponent, setShowComponent] = useState(false);

  const handleClick = () => {
    setShowComponent(true);
  };

  return (
    <div>
      <button onClick={handleClick}>Click Me</button>
      {showComponent && <DynamicComponent />}
    </div>
  );
};

const DynamicComponent = () => {
  return <p>This is a dynamically added component!</p>;
};

export default App;
Enter fullscreen mode Exit fullscreen mode

===========================================================

Image description

import LogFilters from "./LogFilters"

Image description

Image description

output

Image description

Top comments (0)