How to pass two functions to onClick event in react

Question

I want to pass two functions to onClick event which is handleSubmit and handleDelete to the HomePage.js from the HomeItem.js

Here is my Error: No duplicate props allowed react/jsx-no-duplicate-props.

Here is my HomePage.js:

 const HomePage = props => {
  const tvshow = props.item;
  let res;

  if (tvshow.length > 0) {
    res = tvshow.map(res=> (
      <Content item={res} onClick={props.onClick}/>
    ));
  }

  return (
    <div>
      <Container>
        <Row>{res}</Row>
      </Container>
    </div>
  );
};

export default HomePage;

Here is my HomeItem.js:

const HomeItem = props => {
  function handleSubmit() {
    props.onClick({
      name: props.item.name,
      id: props.item.id
    });
  }

  function handleName() {
    props.onClick({
      name: props.item.name
    });
  }

<Button onClick={handleSubmit}></Button>
<Button onClick={handleName}></Button>

Here is my App.js:

handleSubmit(newFavorite) {}
handleName(newFavorite) {}

render() {
  <Route
    exact
    path="/"
    render={() => (
      <HomePage
        item={this.state.SaveFavorite}
        onClick={this.handleSubmit}
        onClick={this.handleName}
      />
    )}
  />
}

So my question is how to put 2 onClick function to the Hompage.js

What exactly do you want to achieve? 2 different functionalities for the button? or when you click a button you want to run one function and then a second one? — c-chavez
– c-chavez, Commented Oct 31, 2018 at 13:57
why 2 functions for one onClick? why not, 2 separate ones? like onSubmitClick and onNameClick? — brietsparks
– brietsparks, Commented Oct 31, 2018 at 15:56

mousetail · Accepted Answer · 2018-10-31 13:32:40Z

5

How about this:

<HomePage
        item={this.state.SaveFavorite}
        onClick={(favorite)=>{
            this.handleSubmit(favorite);
            this.handleName(favorite);
            }
        }
        />

This assumes your goal is to call both functions one at a time. If they should be called in different situations give one function a different name, eg onSubmit or onNameChange.

answered Oct 31, 2018 at 13:32

mousetail

8,1696 gold badges31 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

YOUNES BELHIT · Accepted Answer · 2018-10-31 16:23:01Z

1

Try This:

<HomePage
     item={this.state.SaveFavorite}
     onClick={(newFavorite) => this.handleSubmit(newFavorite);this.handleName(newFavorite)}
 />

edited Oct 31, 2018 at 16:23

answered Oct 31, 2018 at 15:47

YOUNES BELHIT

241 silver badge5 bronze badges

1 Comment

RRR uzumaki Over a year ago

what if first one is asynchronous ..i want the second one to be executed only after the first one gets successfully completed

KBT · Accepted Answer · 2020-12-26 03:17:23Z

you can pass multiple functions to events in react, let say changeEvent, to do follow those steps.

1- create your function two or the number of function you like.

2- create an object that contains those functions

3- pass the object as a props to where it would be consumed

4- choose the correspondant function to each form or whatever you need.

here is an example, this sample is with typescript.

  const onChangeFunctions = {
    onChangeForm1: handleChangeForm1,
    onChangeForm2: handleChangeForm2,
};

   <MainForm
      onChange={onChangeFunctions} // here is your function
      datas={yourData}
      otherProps={otherProps}
    />

Now you use the fucntion on the child components

interface PropsFrom {
  model1: Model1;
  model2: Model2;
  onChange: any;
}

export default function ProductForm(props: PropsForm) {
 return (
  <Container maxWidth="lg">
    <Grid item md={6}>
      <FormOne
        model={props.model1} // the model that bind your form
        onChange={props.onChange.onChangeForm1} // here you can use your first function
      />
    </Grid>

   <Grid item md={6}>
      <FormTwo
        model={props.model2} // the model that bind your form
        onChange={props.onChange.onChangeForm2} // here you can use your second function
        />
      </Grid>
    </Grid>
  </Container>

for javascript just pass the functions as props and delete the interface from the child components.

Collectives™ on Stack Overflow

How to pass two functions to onClick event in react

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related