CODEWITHSUNDEEP
reactjsbutton
Faris ll
Faris ll

Reputation: 59

React running a function inside onClick of a button inside parent component

I have two components a child and a parent so the child is a div with a button inside it and inside the parent i call it with the onclick property with function inside it is it possible ?

Button.js

import React from "react";

const Button =() => {
  return(
    <div>
      <button> >Hello world</button>
    </div>
  )
}
export default Button;

App.js

import React from "react";
import ReactDOM from "react-dom";
import Button from "./button";
import "./styles.css";

const  handleClick = () => {
  return(<h1>Hello world..!</h1>)

}

function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <Button onClick={handleClick()} />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Upvotes: 1

Views: 10194

Answers (3)

Sean
Sean

Reputation: 37

The onClick prop you have set to the <Button /> component will never reach the <button> element. You have to add the onClick prop to the Button components props:

import React from "react";
import PropTypes from 'prop-types';

const Button = ({ onClick }) => {
  return(
    <div>
      <button onClick={onClick}>Hello world</button>
    </div>
  )
}

Button.defaultProps = {
  onClick: () => null,
};
Button.propTypes = {
  onClick: PropTypes.func,
};
export default Button;

Also note that in the parent component you should pass the function without the parenthesis in this case <Button onClick={handleClick} />. Keep in mind there are different ways to do this for different use cases.

Upvotes: 0

Denis Bubnov
Denis Bubnov

Reputation: 2785

Let's create good button component for use the button component in multiple pages. Create own file for button component with next code:

import React from "react";

const Button = ({ onClick, title }) => (
  <div>
    <button onClick={onClick}>{title}</button>
  </div>
)

export default Button;

The button component have two props. It is onClick and title. onClick - it is a function. title - it is a string. We can use PropTypes for checking types, but not right now, in this example it is not very important.

So, if you want to use the button component in multiple pages then just import your button component and pass two props to the component like next code:

<Button
  onClick={handleClick}
  title=">Hello world"
/>

It is very simple and usable. Full example with your code in the next snippet: 

const Button = ({ onClick, title }) => (
  <div>
    <button onClick={onClick}>{title}</button>
  </div>
)

const handleClick = () => {
  console.log('clicked');
};

function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <Button onClick={handleClick} title=">Hello world" />
    </div>
  );
}


ReactDOM.render(
  <App />,
  document.getElementById('container')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

Upvotes: 3

Engineer
Engineer

Reputation: 1261

Error is handleClick() is a function handler, so don't return a JSX template in it,
this is a working example 

   // Button.js

    // import React from "react";

    const Button = props => (
        <div>
          <button onClick={props.click}>Hello world</button>
        </div>
      )
    // export default Button;

    // App.js

    // import React from "react";
    // import ReactDOM from "react-dom";
    // import Button from "./button";
    // import "./styles.css";

    const  handleClick = () => {
      alert("Hello world")
      // return(<h1>Hello world..!</h1>)
    }

    function App() {
      return (
        <div className="App">
          <h1>Hello CodeSandbox</h1>
          <h2>Start editing to see some magic happen!</h2>
          <Button click={() => handleClick()} />
        </div>
      );
    }

    const rootElement = document.getElementById("root");
    ReactDOM.render(<App />, rootElement);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root" />

Upvotes: 0

Related Questions