CODEWITHSUNDEEP
javascriptreactjs
Abhinav Mehrotra
Abhinav Mehrotra

Reputation: 613

React.js Onclick event on a dynamically generated button is not firing

So I am new to React.js and have gotten stuck on writing a fucntionality. I have a form in which i am trying to add a set of data a numerical value & a web address. Once a user clicks the add button, a row is dynamically generated within the form with the values displayed and option to either edit or delete the said value. The user can add as many of these rows as they want.

The code to generate these dynamic rows is below

let orderStandardDetails = '<div id={standardInfo_'+orderStandardInformationChildNodesLength+'} class="standardInfo"><br /><input id="orderStandard_'+orderStandardInformationChildNodesLength+'" class="orderStandardInfo" type="text" value="ISO '+orderStandard.toString()+'" name="standardInfo" disabled/>' +
      '<input id={orderStandardUrl_'+orderStandardInformationChildNodesLength+'} type="text" class="orderStandardUrlInfo" value="'+orderStandardUrl+'" disabled/>' +
      '<button class="orderStandardEdit" id={orderStandardEdit_'+orderStandardInformationChildNodesLength+'} onClick={this.editOrderStandard}><img src="app/images/Edit.svg" /></button>' +
      '<button class="orderStandardDelete" id={orderStandardDelete_'+orderStandardInformationChildNodesLength+'} onClick={this.deleteOrderStandard()}><img src="app/images/Delete.svg" /></button>' +
      '<button class="orderStandardSave" id={orderStandardSave_'+orderStandardInformationChildNodesLength+'} onClick={this.saveOrderStandard()}><img src="app/images/Save.svg" /></button></div>';

Also, I am binding the function as follows inside the constructor

this.editOrderStandard = this.editOrderStandard.bind(this);
  this.deleteOrderStandard = this.deleteOrderStandard.bind(this);
  this.saveOrderStandard = this.saveOrderStandard.bind(this);

The said function is defined as follows

editOrderStandard(){
  alert("Edit");
}

deleteOrderStandard(){
  alert("Delete");
}

saveOrderStandard(){
  alert("Save");
}

The issue is that none of the above three functions are firing on clicking teh button. Moreover, in the firefox console i cannot see any errors pertaining to onclick.

Please help.

Upvotes: 0

Views: 2676

Answers (2)

Brayton Stafford
Brayton Stafford

Reputation: 314

If you're using redux, check out redux-form's fieldArray. I think the example provides functionality similar to what you are looking for.

Redux Form - Field Arrays Example

Upvotes: -1

Dev
Dev

Reputation: 3932

First things first, you should avoid to do DOM manipulations and let react take care of it. As suggested to you in comments, you should use JSX. For more info: JSX

You can create stateless components which you want to dynamically render and let the parent component take care of state changes. Below sample is for reference.

const OrderStandardDetails =(props) => {
  return ( 
    <div class = "standardInfo">
      <input class = "orderStandardInfo"
      type = "text"
      value = "ISO"
      name = "standardInfo"
      disabled / >
      <input type = "text"
      class = "orderStandardUrlInfo"
      value = ""
      disabled / >
      <button class = "orderStandardEdit"
      onClick = {props.onEdit}>Edit</button>
    </div>
  );
};

class App extends React.Component {
  constructor(props) {
    super(props);
    this.onEdit = this.onEdit.bind(this)
  }

  onEdit() {
    alert("Edit");
  }

  render() {
    return <div>
      <OrderStandardDetails onEdit={this.onEdit} />
     </div>
    
  };
}
ReactDOM.render( < App / > , document.getElementById("app"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

Upvotes: 3

Related Questions