title: React JS issue when trying to save object / array - Canvas Signature Pad
body: <p>hopefully someone can help me out. :(</p>
  
  <p>The attached screenshot shows my problem. 
  <a href="https://i.stack.imgur.com/nMTHR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nMTHR.png" alt="enter image description here"></a>
  please notice the signatures in the background and the names</p>
  
  <p>I use react-signature-canvas (Signature Pad Fork) to write the signature as a Data URL string into my database. </p>
  
  <p>This works perfect, as long as I click on the "TRIM" Button before submitting with the SAVE button. </p>
  
  <p>I tried to adjust my code and embedded the TRIM function in the handleSave function. To my understanding this should be exactly the same and I should be able to get rid of the step where I press the Trim button manually before saving. </p>
  
  <p>Unfortunately this does not work. So if I enter details and a signature without pressing the TRIM button and directly press on save (which runs the TRIM function anyway) what happens is the following: </p>
  
  <p>The first entry does not have a signature. 
  The second entry gets the signature from the first person. 
  The third entry get the signature from the second person. </p>
  
  <p>So the first entrys' signature is being skipped everytime. </p>
  
  <p>I really do not know where the issue is, hopefully you can help me. </p>
  
  <p>Thanks a lot guys! </p>
  
  <hr>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>...
  import SignatureCanvas from 'react-signature-canvas';
  
  class AddPerson extends Component {
  
      state = {
          open: false,
          trimmedDataURL: null,
      };
  
      sigPad = {
          width: 500,
          height: 200,
      };
  
      handleClickOpen = () =&gt; {
          // Opens the popup modal window
          this.setState({ open: true });
      };
  
      clear = () =&gt; {
          // Clears the signature pad / input field for signature
          this.sigPad.clear()
      };
  
      trim = () =&gt; {
          this.setState({ trimmedDataURL: this.sigPad.getCanvas().toDataURL('image/png') });
      };
  
      handleChange = name =&gt; event =&gt; {
          this.setState({
              [name]: event.target.value,
          });
      };
  
  
  
      handleClose = (e) =&gt; {
          // Close the popup modal window
          this.setState({ open: false });
      };
  
      handleSave = () =&gt; {
          var { trimmedDataURL } = this.state;
  
          this.trim(); /* This runs the TRIM function */
  
          var NewPerson = [{
              Firstname: this.state.addPersonFirstname,
              Lastname: this.state.addPersonLastname,
              Birthday: this.state.addPersonBirthday,
              SigImage: this.state.trimmedDataURL
          }];
  
          // Get previous Persons from Storage and write to a PreviousPersons - Callback version
          localforage.getItem('persons', function (err, PreviousPersons) {
  
              // Create combined var with PreviousPersons and NewPerson - Start
              var CombinedPersons
              if (PreviousPersons === null) {
                  CombinedPersons = NewPerson
              } else {
                  CombinedPersons = [...PreviousPersons, ...NewPerson]
              }
              // Create combined var with PreviousPersons and NewPerson - End
  
              // Write CombinedPersons to storage - Start
              localforage.setItem('persons', CombinedPersons)
                  .then(function (value) {
                      // Do other things once the value has been saved.
                      console.log(CombinedPersons);
                  }).catch(function (err) {
                      // This code runs if there were any errors
                      console.log(err);
                  })
              // Write combined list to storage - End
  
          })
      };
  
  
  
      render() {
          var { trimmedDataURL } = this.state;
          return (
              &lt;div style={{ display: 'flex', flexWrap: 'wrap' }}&gt;
                  &lt;Button mini color="inherit" aria-label="Add" onClick={this.handleClickOpen}&gt;
                      &lt;AddIcon /&gt;
                  &lt;/Button&gt;
  
                  &lt;Dialog
                      open={this.state.open}
                      onClose={this.handleClose}
                      aria-labelledby="form-dialog-title"
                  &gt;
  
                      &lt;DialogTitle id="form-dialog-title" align='center'&gt;Add a Person&lt;/DialogTitle&gt;
  
                      &lt;Divider variant="middle" style={{ marginBottom: 25 }} /&gt;
  
                      &lt;DialogContent&gt;
  
                          &lt;DialogContentText&gt;Please enter details:&lt;/DialogContentText&gt;
  
                          &lt;TextField
                              id="addPersonFormFirstname"
                              label="Vorname"
                              type="string"
                              onChange={this.handleChange('addPersonFirstname')}
                              style={{ display: 'flex', flexWrap: 'wrap', marginBottom: 25 }}
                              margin="dense"
                          /&gt;
  
                          &lt;TextField
                              id="addPersonFormLastname"
                              label="Nachname"
                              type="string"
                              onChange={this.handleChange('addPersonLastname')}
                              style={{ display: 'flex', flexWrap: 'wrap', marginBottom: 25 }}
                              margin="dense"
                          /&gt;
  
                          &lt;TextField
                              id="addPersonFormBirthday"
                              label="Geburtsdatum"
                              type="date"
                              onChange={this.handleChange('addPersonBirthday')}
                              style={{ display: 'flex', flexWrap: 'wrap', marginBottom: 25, paddingTop: 5 }}
                              defaultValue="2019-01-01"
                              InputLabelProps={{ shrink: true }}
                              margin="dense"
                          /&gt;
  
                          &lt;Divider variant="middle" style={{ marginBottom: 25 }} /&gt;
  
                          &lt;div className={styles.container}&gt;
                              &lt;div className={styles.sigContainer}&gt;
                                  &lt;SignatureCanvas backgroundColor='rgba(246,246,246,1)' penColor='navy' canvasProps={{ className: styles.sigPad }} ref={(ref) =&gt; { this.sigPad = ref }} /&gt;
                              &lt;/div&gt;
                              &lt;div&gt;
                                  &lt;button className={styles.buttons} onClick={this.clear}&gt;Clear&lt;/button&gt;
                                  &lt;button className={styles.buttons} onClick={this.trim}&gt;Trim&lt;/button&gt;
                              &lt;/div&gt;
                              {this.state.trimmedDataURL ? &lt;img alt="Signature" className={styles.sigImage} src={this.state.trimmedDataURL} /&gt; : null}
                          &lt;/div&gt;
  
                      &lt;/DialogContent&gt;
  
                      &lt;DialogActions&gt;
                          &lt;Button onClick={this.handleClose} variant="contained" color="default"&gt;Close&lt;/Button&gt;
                          &lt;Button onClick={this.handleSave} variant="contained" color="primary"&gt;Save&lt;/Button&gt;
                      &lt;/DialogActions&gt;
  
                      &lt;Divider variant="middle" style={{ marginBottom: 25 }} /&gt;
  
                  &lt;/Dialog&gt;
              &lt;/div&gt;
          );
      }
  
  
  }
  
  export default AddPerson;</code></pre>
  </div>
  </div>
  </p>