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

Question

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 ??

can you show us what your Panel component look like ? is it a styled component? — Anh Tuan
– Anh Tuan, Commented May 24, 2021 at 4:12

Matthew Kwong · Accepted Answer · 2021-05-24 03:58:42Z

1

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>
  );
};

answered May 24, 2021 at 3:58

Matthew Kwong

3,0162 gold badges17 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

KYUN Over a year ago

oh that's how it use ! Thanks ! this is so helpful !

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related