reactjs state updating in a for each loop and displaying the corresponding value for each increment in a dialog box

I have a for each loop in which the properties are loaded dynamically and also shows a button to show dialog box with corresponding values of the each property but in react after rendering the entire page every dialog box is showing the last loaded property values rather than the corresponding values.

<div>
  <span id={property + '1'} className="ServiceImpactingIconForText">
      {showDialogBox(
        property,
        defaultValue[property],
        jschema[property].readOnly
       )}
     </span>
</div>

I added this div after the property div in for each loop. property, defaultValue[property] and jschema[property].readonly are the values passed to showdialogbox component which renders the button to show the dialog box

const showDialogBox = (title, value, readOnly) => { return (
<div>
  <ArrowLineExpandIcon size="10px" color="gray" backgroundColor="red" style={{ cursor: 'pointer', }} onClick={this.openDialog} />
  <Dialog title={title} value={value} readOnly={readOnly} />
</div>
}

openDialog is a funtion which will return true to show the dialog box.