0

I have an issue with a modified field value not "sticking" to the form upon submission.

I'm creating a form where users can upload an image. After the image is uploaded, the hosting service returns the image URL, which is saved into a state variable with

this.setState({
            imageUrl: info.secure_url
})

In the TextField, I have the value set as

<TextField name='imageUrl' value={this.state.imageUrl}/>

This works fine and shows up on the form, but an issue arises when the form is submitted. The form does not recognize that there is something in that field, and throws an error stating input is required.

The submit function works fine with user entered fields and successfully submits data to the database.

Here is the full code

class SubmitVaccine extends React.Component {
  ...
  state = {
    imageUrl: null,
    imageAlt: null,
  }
  uploadImage = () => {
        ...
        (code to upload image here)
        ...
        if (event === 'success') {
          this.setState({
            imageUrl: info.secure_url
          }
  };

  render() {
    const { imageUrl } = this.state;
    return (
      <Grid>
                ...
                (code to upload image here)
                ...

                <TextField name='imageUrl' value={this.state.imageUrl}/>
                <SubmitField value='Submit' id="btn-custom"/>
                ...
      </Grid>
    );
  }
}

Here are some visuals. Default this.state.imageUrl is set to null, so field shows up empty

enter image description here

After image is uploaded, the image URL shows up because this.state.imageUrl has changed

enter image description here

However, the text field is required and it errors out when the field is empty upon submission. This is exactly what is happening here, but the field is filled! Where should I look for clues on how to solve this? enter image description here

UPDATE

UPDATE

UPDATE

I found out the form errors out because it submits the original, NOT updated state of imageUrl, which was set to null. null = empty field = error upon submission.

However, we can visually see that the field shows an updated imageUrl. How do I make the form submit the new imageUrl?

Arslan
  • 73
  • 6
  • 1
    everything LGTM. i think the issue will be in the code where you are accessing the URL for submitting – Abdul Rehman Kaim Khani Sep 29 '21 at 08:01
  • @AbdulRehmanKaimKhani Thank you for your reply! I found out that the form submits the original, not modified state of imgUrl, which was set to null. Thats why the form thought the field was empty. But it also showed that the state of imageUrl was updated? – Arslan Sep 29 '21 at 08:22
  • state must be placed at parent component. Otherwise, the updated value will be lost unless using setTimeout to wait for re-render completed before form submit. – Miller Cy Chan Aug 17 '22 at 03:11
  • Related to: https://stackoverflow.com/questions/24718709/reactjs-does-render-get-called-any-time-setstate-is-called – Miller Cy Chan Aug 17 '22 at 03:16

1 Answers1

1

you didn't have a onChange function on your TextField component, you should make an onChange function to update your state whenever you type into it, like so

handleChangeURL(event) {
    this.setState({imageURL: event.target.value});
}

and put it on

<TextField name='imageUrl' value={this.state.imageUrl} onChange={this.handleChangeURL}/>

Just make sure that your TextField component calls the onChange function properly

pann
  • 64
  • 3