This is link to the question.
Please suggest away to achieve this.
You basically want an object in a db or something. Then, you can have a key value pair within the object. So adding a span (i.e. a render of something) is just telling the higher level component to map over the range, of type the span you want.
The below is from React, but what you are looking to do is similar I should think. So the image below, focus on the plus sign…
Now when I click on the plus sign,
The code:
renderStringMultiple(fileObject, fieldIndex, fieldObject) {
// some const's was here...
if (canView || canEdit) {
if (canMultiple) {
const fieldHelper = fieldObject.fieldSpecific.fieldHelper;
const fieldNotes = fieldObject.fieldSpecific.fieldNotes;
return (
<span>
{
(fieldObject.fieldSpecific.fieldFinalValues.length === 0) ?
<div className="row">
<div className="col-6">
<TextField
disabled={!canEdit}
hintText={(fieldHelper !== '') ? fieldHelper : ''}
floatingLabelText={(fieldHelper !== '') ? fieldHelper : ''}
errorText={(this.textString.multipleErrorText.length === 0) ? '' : this.textString.multipleErrorText[0]}
value={(this.textString.multipleErrorText.length === 0) ? '' : fieldObject.fieldSpecific.fieldFinalValues[0]}
onChange={this.handleChangeMultiple.bind(this, fileObject, fieldIndex, 0)}
/>
</div>
<div className="row">
<div className="col-6" >
<div style={{ display: 'flex', flexWrap: 'wrap', padding: '7px 0px' }}>
{ (fieldNotes) ?
<div style={styles.item} title={fieldNotes}>
<IconButton>
<ActionInfoOutline/>
</IconButton>
</div> : ''
}
{ (canMultiple) ?
<div style={styles.item} title={fieldNotes}>
<IconButton
onTouchTap={this.handleTouchTapAdd.bind(this, fileObject, fieldIndex)}
>
<ContentAdd/>
</IconButton>
</div> : ''
}
</div>
</div>
</div>
</div> : ''
}
{
fieldObject.fieldSpecific.fieldFinalValues
.map((valueValue, valueIndex) => {
return (
<div className="row" key={valueIndex}>
<div className="col-6">
<TextField
disabled={!canEdit}
hintText={(fieldHelper !== '') ? fieldHelper : ''}
floatingLabelText={(fieldHelper !== '') ? fieldHelper : ''}
errorText={(this.textString.multipleErrorText.length < valueIndex) ? '' : this.textString.multipleErrorText[valueIndex]}
value={(fieldObject.fieldSpecific.fieldFinalValues.length < valueIndex) ? '' : fieldObject.fieldSpecific.fieldFinalValues[valueIndex]}
onChange={this.handleChangeMultiple.bind(this, fileObject, fieldIndex, valueIndex)}
/>
</div>
<div className="row">
<div className="col-6" >
<div style={{ display: 'flex', flexWrap: 'wrap', padding: '7px 0px' }}>
{ (fieldNotes) ?
<div style={styles.item} title={fieldNotes}>
<IconButton>
<ActionInfoOutline/>
</IconButton>
</div> : ''
}
{ (valueIndex === fieldObject.fieldSpecific.fieldFinalValues.length-1) ?
<div style={styles.item} title={fieldNotes}>
<IconButton
onTouchTap={this.handleTouchTapAdd.bind(this, fileObject, fieldIndex)}
>
<ContentAdd/>
</IconButton>
</div> : ''
}
{ (valueIndex !== fieldObject.fieldSpecific.fieldFinalValues.length-1) ?
<div style={styles.item} title={fieldNotes}>
<IconButton
onTouchTap={this.handleTouchTapSub.bind(this, fileObject, fieldIndex, valueIndex, valueValue)}
>
<ActionDelete/>
</IconButton>
</div> : ''
}
</div>
</div>
</div>
</div>
);
})
}
</span>
);
}
}
}
Points of note:
(1) The idea is we have a field called finalValues, which is an array. This is what we need the map over.
(2) The way I have done it is to use the first bit of code if there is only 1 element. Then, if there is more than 1 element, I use the second bit of code.
(3) I have not actually done this correctly. The smart way to do this is to have the first bit of code apply for the first element of finalValues. Then, the second bit of code should only handle the finalValues from index 1 → whatever.
(4) The issue, which is actually quite subtle, is if the user puts in something into finalValues[0], they will then loose focus as one span element is switched out for another. This was not obvious until I had finished, so, still needs to be fixed.
Obviously if I misunderstood your question, ignore above.
Edit: The thing I did not mention above, is the function behind the + adds an element into finalValues, and due to ddp this should autoupdate, which means a new span should appear.