CODEWITHSUNDEEP
reactjs
KYUN
KYUN

Reputation: 177

How can i render specific component with onClick in react.js?

Im new to react.js. I'd like to render out a component. like this

import styled from "styled-components";
import Panel from "./Panel";
const Menu = () => {
  return (
    <Main>
      <div>
        <h1 onClick={Panel}>(1+3)</h1>
      </div>

but I don't think it's right so how do u render specific component with onClick in react.js ??

Upvotes: 1

Views: 80

Answers (1)

Matthew Kwong
Matthew Kwong

Reputation: 2947

The code should be self-explanatory. Update me if you don't understand any part of them.

import styled from "styled-components";
import Panel from "./Panel";
import { useState } from "react";

const Menu = () => {
  const [showPanel, setShowPanel] = useState(false);
  const handleOnClick = () => setShowPanel(true);

  return (
    <Main>
      <div>
        <h1 onClick={handleOnClick}>(1+3)</h1>
      </div>
      {showPanel ? <Panel /> : null}
    </Main>
  );
};

Upvotes: 1

Related Questions