1

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>
    );
Amon
  • 2,725
  • 5
  • 30
  • 52
  • 5
    `onClick={() => this.selectSupplier("Husky")}>` You're calling the function instead of passing a reference to it. – Emile Bergeron Dec 11 '19 at 21:28
  • 1
    Does this answer your question? [React js onClick can't pass value to method](https://stackoverflow.com/questions/29810914/react-js-onclick-cant-pass-value-to-method) – Emile Bergeron Dec 11 '19 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 Dec 11 '19 at 21:33
  • 1
    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 Dec 11 '19 at 21:35

1 Answers1

1

You can call like this :

this.selectSupplier.bind(this,"Husky");
Pratap Tengale
  • 77
  • 3