title: react.js - how to add element on success in dynamically generated button?
body: <p>I have dynamically generated component with textfields and buttons. Each button do the ajax request. It's all working fine. However, I want to display the success message or error message on button itself, adding some icon on it. This is where I got stuck. I setup the flag and change the state, but it will change on all the buttons as expected. I also tried to change the current target, but the reference didn't work in success callback. Can someone please help me with this.</p>
  
  <pre><code>    const FormGroup = ({index, type, field, value, onChange, spinner, isLoading, error, buttonType, brandList, handleBrandConfiguration, checkAvailability, handleCaseType, options, handlerRemoveItem})=&gt; {
    return(
      &lt;div&gt;
        &lt;div className="form-group"&gt;
          &lt;label&gt;{index}&lt;/label&gt;
          &lt;input type="text"
            name={field}
            className="form-control"
            value={value}
            onChange={onChange}
            /&gt;
            &lt;select className="form-control" defaultValue="" onChange={handleBrandConfiguration}&gt;
              &lt;option value=""&gt;Please select brand&lt;/option&gt;
              {brandList}
            &lt;/select&gt;
          &lt;select className="form-control" defaultValue="" onChange={handleCaseType}&gt;
            &lt;option value=""&gt;Please select case template&lt;/option&gt;
            {options}
          &lt;/select&gt;
          &lt;button
            type={buttonType}
            className={classname(isLoading ? error ? "button button-danger" : "button button-success" : error ? "button button-danger" : "button button-primary")}
            onClick={checkAvailability}&gt;
            &lt;i className={classname(spinner ? error ? '': "fa fa-spinner fa-spin": '')}&gt;&lt;/i&gt; {isLoading ? error ? 'Not Found' :&lt;i className="fa fa-check fa-2" aria-hidden="true"&gt;&lt;/i&gt; : error ? 'Not Found': 'Check Availability'}&lt;/button&gt;
          &lt;input
            type="button"
            className="button button-danger"
            value="Remove Item"
            onClick={handlerRemoveItem}/&gt;
          &lt;/div&gt;
        &lt;/div&gt;
    );
  };
  </code></pre>
  
  <p>Thanks</p>