INU Login Sign up
Login Or Sign up

Answers for "how to pass function as props in react"

Whatever
1

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

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}
        />
      )}
    </>
  );
};
Posted by: Guest on December-23-2021
7

pass props in react

/* PASSING THE PROPS to the 'Greeting' component */
const expression = 'Happy';
<Greeting statement='Hello' expression={expression}/> // statement and expression are the props (ie. arguments) we are passing to Greeting component

/* USING THE PROPS in the child component */
class Greeting extends Component {
  render() {
    return <h1>{this.props.statement} I am feeling {this.props.expression} today!</h1>;
  }
}
Posted by: Guest on May-29-2020
0

pass function with parameter as prop

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>)
    }
}
Posted by: Guest on September-16-2020
0

how to pass functions as a props in react js

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;
Posted by: Guest on February-05-2022

Code answers related to "how to pass function as props in react"

Code answers related to "Whatever"

Browse Popular Code Answers by Language

Python
Javascript
Whatever
Shell/Bash
CSS
Html
PHP
SQL
Java
C#

Popular Programming Languages

Abap ActionScript Assembly BASIC C C# C++ Clojure Cobol CSS Dart Delphi Elixir Erlang F# Fortran Go Groovy Haskell Html Java Javascript Julia Kotlin Lisp Lua Matlab Objective-C Pascal Perl PHP Prolog Python R Ruby Rust Scala Scheme Shell/Bash SQL Swift TypeScript VBA Whatever

Advertisements

290x500

Company

Compilers

Help

Connect with us

footer logo

Copyright © 2021 Codeinu