Breaking News: Grepper is joining You.com. Read the official announcement!

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

Add Answer

Difficult Dove answered on December 23, 2021 Popularity 10/10 Helpfulness 3/10

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

related passing props in react functional components

related how to pass function as props in react

related Passing functions as Props in react

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 javascript

Link to this answer
Share Copy Link

Contributed on Dec 23 2021

Difficult Dove

0 Answers Avg Quality 2/10

Closely Related Answers

passing props in react functional components

Comment

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

const root = ReactDOM.createRoot(document.getElementById('root'));
const element = <Welcome name="Sara" />;
root.render(element);

Popularity 10/10 Helpfulness 3/10 Language javascript

Source: reactjs.org

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Jul 14 2022

Pavitra Kini

0 Answers Avg Quality 2/10

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 j

Link to this answer
Share Copy Link

Contributed on Oct 21 2023

Harihar Padhi

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 function as a props in react in functional components

Contents

More Related Answers

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

Closely Related Answers

passing props in react functional components

how to pass function as props in react

Passing functions as Props in react

Grepper

Documentation

Social

Legal

Contact

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