CODEWITHSUNDEEP
javascriptreactjsonclicksetstate
user7674254
user7674254

Reputation: 87

set state in onClick function

I have 2 submit buttons in my react form.

I am trying to use an onClick function to get the id of the clicked button, so I can then specify how to handle each accordingly.

My onClick function is returning undefined for the setState of the id.

How can I properly grab the id of the button and set the state?

handleClick() {
    var buttons = document.getElementsByTagName("button");
    var buttonsCount = buttons.length;
    for (var i = 0; i < buttonsCount; i++) {
        buttons[i].onclick = (e) => {
            this.setState({clickedSubmit: this.id});
            console.log(this.state.clickedSubmit); //returns undefined
        };
    }
}

//in the render
<button id="formSubmit" className="btn btn-info" name="submitButton" onClick={this.handleClick}>Submit</button>
<button id="hashSubmit" className="btn btn-info" name="submitButton" onClick={this.handleClick}>Generate Hash</button>

Upvotes: 2

Views: 18732

Answers (5)

garysnake
garysnake

Reputation: 1

You can try this, even change id to other parameter you want to pass in to the your function.

<button onClick={(e) => this.handlefunction(id, e)}>Delete Row</button>
<button onClick={this.handlefunction.bind(this, id)}>Delete Row</button>

This article helps a great deal:

https://reactjs.org/docs/handling-events.html

Upvotes: 0

Ashh
Ashh

Reputation: 46441

You will find your element id in the event of the onClick handler that is e.target.id

handleClick = (e) => {
  this.setState({ clickedSubmit: e.target.id },() => {
    console.log(this.state.clickedSubmit)
  });
}

//in the render
<button id="formSubmit" className="btn btn-info" name="submitButton" onClick={this.handleClick}>Submit</button>
<button id="hashSubmit" className="btn btn-info" name="submitButton" onClick={this.handleClick}>Generate Hash</button>

Upvotes: 3

Dawid Karabin
Dawid Karabin

Reputation: 5293

You can get id of your buttons by using event.target, like below:

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      clickedId: -1,
    };

    this.handleClick = this.handleClick.bind(this);
  }

  handleClick(event) {
    const id = event.target.id;
    this.setState({
      clickedId: id,
    });
  }

  render() {
    return (
      <div>
        <h1>Clicked id: {this.state.clickedId}</h1>
        <button id="asd" onClick={this.handleClick}>Asd</button>
        <button id="qwe" onClick={this.handleClick}>Qwe</button>
      </div>
    );
  }
}

DEMO: http://jsbin.com/yiqavav/1/edit?html,js,output

Upvotes: 0

julian soro
julian soro

Reputation: 5228

I recommend changing how you invoke handleClick slightly, by passing in an argument for buttonId.

In your render function:

<button onClick={() => this.handleClick('formSubmit')}>Submit</button>

In handleClick:

handleClick(buttonId) { ... }

As I posted in my comment, you have an option to separate the button out into it's own component. In that case, you would be able to use simple like this.props.id to get the value of id.

Upvotes: 2

zenwraight
zenwraight

Reputation: 2000

I would suggest you to go for a simpler approach, something like this

handleClick1() {
    var buttons = document.getElementsByTagName("button");
    var buttonsCount = buttons.length;
    let id = 1;
    for (var i = 0; i < buttonsCount; i++) {
        buttons[i].onclick = (e) => {
            this.setState({clickedSubmit: id});
            console.log(this.state.clickedSubmit); //returns undefined
       };
  }
}

handleClick2() {
    var buttons = document.getElementsByTagName("button");
    var buttonsCount = buttons.length;
    let id = 2;
    for (var i = 0; i < buttonsCount; i++) {
        buttons[i].onclick = (e) => {
            this.setState({clickedSubmit: id});
            console.log(this.state.clickedSubmit); //returns undefined
       };
  }
}

//in the render
    <button id="formSubmit" className="btn btn-info" name="submitButton" onClick={this.handleClick1}>Submit</button>
    <button id="hashSubmit" className="btn btn-info" name="submitButton" onClick={this.handleClick2}>Generate Hash</button>

The benefit of this approach is, in future when your button count increases, then at that time, your code should be modular so that it is easy to add new functionality to your app.

Hope this helps!

Upvotes: 0

Related Questions