Having multiple buttons call a function in ReactJS

Question

Sorry if the title is vague. My problem is that I have three button tags, and for each tag I want it to send a unique argument to selectSupplier(). However no matter what button I press selectSupplier() only receives the last value ("ultramar") as an argument.

selectSupplier(supplier){
    this.props.Obj.supplier = supplier
  }


  render() {
    //console.log("SUPPLIER", this.props)
    return (
      <div>
        <button onClick={this.showMenu}>
          Select Supplier
        </button>

        {
          this.state.showMenu
            ? (
              <div
                className="menu"
                ref={(element) => {
                  this.dropdownMenu = element;
                }}
              >
                <button value="Husky" onClick={this.selectSupplier("Husky")}> Husky </button>
                <button value="Shell" onClick={this.selectSupplier("Shell")}> Shell </button>
                <button value="Ultramar" onClick={this.selectSupplier("Ultramar")}> Ultramar</button>
              </div>
            )
            : (
              null
            )
        }
      </div>
    );

onClick={() => this.selectSupplier("Husky")}> You're calling the function instead of passing a reference to it. — Emile Bergeron
– Emile Bergeron, Commented Dec 11, 2019 at 21:28
Does this answer your question? React js onClick can't pass value to method — Emile Bergeron
– Emile Bergeron, Commented Dec 11, 2019 at 21:30
@EmileBergeron Thank you! I knew it was a simple fix, if you want to post an answer I'll gladly accept. Thank you for the link too, gave me some great info Ill follow — Amon
– Amon, Commented Dec 11, 2019 at 21:33
This was already answered multiple times on this site, so we'd rather close it as a duplicate to redirect anyone to the right place! — Emile Bergeron
– Emile Bergeron, Commented Dec 11, 2019 at 21:35

Pratap Tengale · Accepted Answer · 2019-12-12 09:53:26Z

1

You can call like this :

this.selectSupplier.bind(this,"Husky");

answered Dec 12, 2019 at 9:53

Pratap Tengale

773 bronze badges

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

Collectives™ on Stack Overflow

Having multiple buttons call a function in ReactJS

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related