I have a main page, with a button component i create to reuse in my project. My issue is when i add the onClick event to my external component, the click event is not working, but is i create the same button inside my main page, the click event works just fine
Button Component
import React from "react"; import styled from "styled-components"; const BigButton = (props): JSX.Element => { return <>{props.red ? <BigBtn red={props.red}>{props.val}</BigBtn> : <BigBtn>{props.val}</BigBtn>}</>; }; export default BigButton; const BigBtn = styled.button` font-style: normal; font-weight: 500; font-size: 12px; line-height: 15px; color: #f5f5f5; width: 78px; height: 30px; background: ${(props) => (props.red ? "#BD2129" : "#2e3034")}; border: ${(props) => (props.red ? "initial" : "1px solid #494b4f")}; border-radius: 2px; display: flex; align-items: center; justify-content: center; `;
This works on main page
<button onClick={buttonClose}>Close</button>
Button Component on main page – This doesn’t work on main page
<BigButton val="Cancel" onClick={handleClose} />
Close function
const handleClose = (e) => { e.preventDefault(); props.onClose(); };
Advertisement
Answer
Your component does not look correct. You do not have button
inside the component and onClick
event. You should update like this
import React from "react"; import styled from "styled-components"; const BigButton = (props): JSX.Element => { const handleClick = () => { props.onClick() } return <>{props.red ? <BigBtn red={props.red}> <button onClick={handleClick}> {props.val} </button> </BigBtn> : <BigBtn> <button onClick={handleClick}> {props.val} </button> </BigBtn>} </> }; export default BigButton; const BigBtn = styled.button` font-style: normal; font-weight: 500; font-size: 12px; line-height: 15px; color: #f5f5f5; width: 78px; height: 30px; background: ${(props) => (props.red ? "#BD2129" : "#2e3034")}; border: ${(props) => (props.red ? "initial" : "1px solid #494b4f")}; border-radius: 2px; display: flex; align-items: center; justify-content: center; `;