Question

183

How to pass arguments to function in functional component in React

rated 0 times [ 189] [ 6] / answers: 1 / hits: 23490 / 5 Years ago, tue, may 14, 2019, 12:00:00

How can I pass arguments to a function in functional component? As far as I know, creating function in jsx is not good practice right?

function MyComponent(props) {

  function handleChange(event, data){

    console.log(event.target.value);

    console.log(data);

  }

  return <button onClick={handleClick(??)} value='Foo'>Click</button>

}

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

ammonjesseg

Add To Favorites

Follow

Total Points: 170

Total Questions: 110

Total Answers: 98

Location: Benin

Member since Fri, Mar 24, 2023

1 Year ago

answered 5 Years ago jarettajb · Accepted Answer

This will work

function MyComponent(props) {

  function handleChange(event, data){

    console.log(event.target.value);

    console.log(data)



  }

  return <button onClick={(event) => handleChange(event, 'Some Custom Value')} value='Foo'>Click</button>

}

Or if you only want to send the data property, you could do something like

function MyComponent(props) {

  function handleChange(data){

    console.log(data)



  }

  return <button onClick={(event) => handleChange('Some Custom Value')} value='Foo'>Click</button>

}