how to pass function as props in react

Add Answer

Harihar Padhi answered on September 16, 2020 Popularity 9/10 Helpfulness 2/10

answer how to pass function as props in react

related how to pass function as a props in react in functional components

related pass function with parameter as prop

related Passing functions as Props in react

related how to pass functions as a props in react js

how to pass function as props in react

Comment

const ComponentA = () => {
  const handleClick = () => {
    console.log(`Button is clicked`);
  };

  return <div>
    <button onClick={handleClick}>My Button</button>
  </div>;
};
export default ComponentA;

Popularity 9/10 Helpfulness 2/10 Language javascript

Source: Grepper

Tags: javascript

Link to this answer
Share Copy Link

Contributed on Oct 21 2023

Harihar Padhi

0 Answers Avg Quality 2/10

Closely Related Answers

how to pass function as a props in react in functional components

Comment

function App() {
  const [status, setStatus] = React.useState(false);
  const [text, setText] = React.useState("");
  const handleClick = () => {
    this.setStatus(prev => ({ status: !prev.status }));
  };
  const handleChange = e => {
    this.setStatus({ text: e.target.value });
  };

  return (
    <>
      <button onClick={handleClick}>Open photo entry dialog</button>
      <ChildComponent
        isOpen={status}
        text={text}
        handleChange={handleChange}
        handleClick={handleClick}
      />
    </>
  );
}

const ChildComponent = ({ isOpen, text, handleChange, handleClick }) => {
  return (
    <>
      {isOpen && (
        <Model
          status={isOpen}
          handleClick={handleClick}
          text={text}
          handleChange={handleChange}
        />
      )}
    </>
  );
};

Popularity 10/10 Helpfulness 3/10 Language javascript

Source: Grepper

Tags: components c

Link to this answer
Share Copy Link

Contributed on Dec 23 2021

Difficult Dove

0 Answers Avg Quality 2/10

pass function with parameter as prop

Comment

class SomeComponent extends Component{

    constructor(props){
        super(props);
        //does whatever stuff        
        this.myFunction = this.myFunction.bind(this);

    }

    //(only applicable to raw and normal forms)
    myFunction(param){
        console.log('do something: ', param);
    }

    render(){
     return (<div><ChildComponent1 myFunction={this.myFunction}/></div>)
    }
}

class ChildComponent1{
      render(){
  return (<div><ChildComponent2 myFunction={this.props.myFunction}/></div>)
    }
}

class ChildComponent2{
      render(){
  return (<Button onClick={()=>this.props.myFunction(param)}>SomeButton</Button>)
    }
}

Popularity 10/10 Helpfulness 2/10 Language javascript

Source: stackoverflow.com

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Sep 16 2020

Embarrassed Echidna

0 Answers Avg Quality 2/10

Passing functions as Props in react

Comment

const Banner = props => {
  const name = props.name
  return (
    <div>
      <p>Hello {name}</p>
      <button onClick={props.clickHandler}>Click Me</button>
    </div>
  )
}

function App() {
  const showAlert = () => {
    alert("Welcome!")
  }
  return (
    <div>
      <Banner name="Ranjeet" clickHandler={showAlert} />
    </div>
  )
}

export default App

Popularity 10/10 Helpfulness 1/10 Language javascript

Source: softhunt.net

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Apr 10 2022

Outrageous Ostrich

0 Answers Avg Quality 2/10

how to pass functions as a props in react js

Comment

import React from 'react';
import './App.css';
import NewComponent from './components/NewComponent';
// import NewFunctionalComponent from './components/NewFunctionalComponent';

class App extends React.Component {

  constructor(){
    super()
    this.state = {
      isClicked: false
    }
    console.log(this.state)
  }

  handleClick = () => {
    console.log('I have been clicked')
    this.setState({
      isClicked: true
    }, () => console.log(this.state.isClicked))

  }

  render() {
    return (
      <div className="App">
        <NewComponent clickMe={this.handleClick} />
        {/* <NewFunctionalComponent noClickMe={this.handleClick} /> */}
      </div>
    )
  }
}

export default App;

Popularity 10/10 Helpfulness 1/10 Language javascript

Source: dev.to

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Feb 05 2022

Expensive Eland

0 Answers Avg Quality 2/10

how to pass function as props in react

Contents

More Related Answers

how to pass function as props in react

Closely Related Answers

how to pass function as a props in react in functional components

pass function with parameter as prop

Passing functions as Props in react

how to pass functions as a props in react js

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.