How to get values from react button onClick

Question

I want to store button values when a user clicks on them in react and store these values in an array for later use. However, given my basic knowledge in REACT I am getting errors and unable to do so.

I am using console.log on the preference array. But I am not getting the values stored on the preference array.

    class Dashboard extends Component {
      constructor(props) {
        super(props);
        this.state = {
          getPreferences: false,
          preferenceArray: []
        };

        // This binding is necessary to make `this` work in the callback
        this.handleClick = this.handleClick.bind(this);
      }
    handleClick() {
    this.setState(state => ({
      getPreferences: !state.getPreferences,
      preferenceArray: state.preferenceArray.push(this.handleClick.value)
    }));


  render() {
    const preference = this.state.preferenceArray;
    console.log(preference[0]);

    const { user } = this.props.auth;
    const { profile, loading } = this.props.profile;

    let dashboardContent;

    if (profile == null || loading) {
      dashboardContent = <Spinner />;
    } else {
      dashboardContent = (
        <h2>
          Select all issues that you are interested in:
          <hr />
          <br />
        </h2>
      );
    }

    return (
      <div className="dashboard">
        <div className="container">
          <div className="row">
            <div className="col-md-12">
              <h1 className="display-4">Dashboard {dashboardContent}</h1>
              <button
                type="button"
                name="Abortion"
                value={this.state.name}
                className="btn btn-secondary"
                onClick={this.handleClick}
              >
                Abortion
              </button>
              &nbsp;&nbsp;&nbsp;
              <button
                type="button"
                name="GayMarriage"
                value="Gay"
                className="btn btn-secondary"
                onClick={this.handleClick}
              >
                Gay Marriage
                {"     "}
              </button>
              &nbsp;&nbsp;&nbsp;
              <button
                type="button"
                name="Guns"
                value="Guns"
                className="btn btn-secondary"
 onClick={this.handleClick}


             >
                Guns
                {"     "}
              </button>
              &nbsp;&nbsp;&nbsp;
              <button
                type="button"
                name="HIR"
                value={this.state.name}
                className="btn btn-secondary"
              >
                Higher Interest Rates
                {"     "}


                onClick={this.handleClick}
              </button>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

Talg123 · Accepted Answer · 2018-10-06 16:05:08Z

1

Well, from what I know all you have to do is basicly use the "event" to get the value.

for example.

handleClick(e) {
//e- the event
this.setState(state => ({
  getPreferences: !state.getPreferences,
  preferenceArray: state.preferenceArray.push(e.target.value)// the event traget value
}));

answered Oct 6, 2018 at 16:05

Talg123

1,5141 gold badge11 silver badges16 bronze badges

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

3 Comments

Shadman Mahmood Over a year ago

Hi, thanks, but I am getting error of cannot read property value of null. Thanks

Shadman Mahmood Over a year ago

@ Talg123 any suggestions to get rid of this error?

Talg123 Over a year ago

hmm not really, Im not React "user" I work with Angular. but from what I know that should work. donno exectly why not. try to console.log the "e" and then the "e.target" before the this.setState... see what you get

Collectives™ on Stack Overflow

How to get values from react button onClick

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related