React Asyn function, Await is a reserved word error

Question

I am struggling to figure out issue with async await function, I keep getting error that said

await is a reserved word

I'm new at react and the async function, I think the problem is where do I should put await in this function properly?

 handleSubmit = async (e) => {

          try {
e.preventDefault();
      this.props.form.validateFieldsAndScroll((err, values) => {
        if (!err && !this.state.added) {
          this.setState({ submit: true });
          await PopUpAdsService.create({
            name: values.name,
            photo: this.state.secureUrl,
            type: values.type,
            link: this.state.deepl,
            status: values.status,
          })

              console.log(response);
              if (response.data.status === 200) {
                Notification(
                  'success',
                  'Pop-up has been created successfully',
                );
                this.setState({ submit: false, added: true });
                setTimeout(() => {
                  this.props.history.replace('/dashboard/pop-up');
                }, 2000);
              }

          } catch (error) {
              console.log(error);
              Notification(
                'error',
                `Oops! Error occured. ${error.response.data.message}`,
              );
              this.setState({ submit: false });
            }

    async handleSubmit(e) {
      try {
    e.preventDefault();
  this.props.form.validateFieldsAndScroll((err, values) => {
        if (!err && !this.state.added) {
          this.setState({ submit: true });
          await PopUpAdsService.create({
            name: values.name,
            photo: this.state.secureUrl,
            type: values.type,
            link: this.state.deepl,
            status: values.status,
          })

          console.log(response);
          if (response.data.status === 200) {
            Notification(
              'success',
              'Pop-up has been created successfully',
            );
            this.setState({ submit: false, added: true });
            setTimeout(() => {
              this.props.history.replace('/dashboard/pop-up');
            }, 2000);
          }

      } catch (error) {
          console.log(error);
          Notification(
            'error',
            `Oops! Error occured. ${error.response.data.message}`,
          );
          this.setState({ submit: false });
        }
   }
      });

    };

what you've posted looks OK (in as far as where the await is - haven't checked any other code) — Jaromanda X, May 30 '18 at 06:18
I'm sorry could you point where I should put the await correctly?or edit my code — Satria stuart, May 30 '18 at 06:24
@AseemUpadhyay - so, what does `await variablename = function() {}` mean? why would you await declaration of a function? and is `variablename` declared using var, let or const? or does it have to be a global as your (invalid) syntax suggests? — Jaromanda X, May 30 '18 at 06:27
@Satriastuart - I don't think Aseem knows - his code produces *"ReferenceError: invalid assignment left-hand side"* error — Jaromanda X, May 30 '18 at 06:29
it would be useful to see the context of that code ... `handleSubmit =` looks ....out of place ... is it a `var`/`let`/`const` ? — Jaromanda X, May 30 '18 at 06:39
Which line the syntax error refers to? Also `response` seems to pop out of nowhere. Have you post entire `handleSubmit` code? Where do you define it? — Yury Tarabanko, May 30 '18 at 06:47
you know what helps ... having the right code ... `this.props.form.validateFieldsAndScroll((err, values) => {` was not there originally!!!!!!! and clearly the await was being "done" inside that callback!!!!!!!!!!!!!!! — Jaromanda X, May 30 '18 at 08:36

Jee Mok · Accepted Answer · 2018-05-30T07:40:33.867

0

*updated code

If we try to use await in non-async function, that would be a syntax error. In your

this.props.form.validateFieldsAndScroll(err, values) => { ...

that is not an async function, so you have to do it like:

this.props.form.validateFieldsAndScroll(async (err, values) => { ...

More info: https://javascript.info/async-await

handleSubmit = async (e) => {
  try {
    e.preventDefault();
    this.props.form.validateFieldsAndScroll(async (err, values) => {
      if (!err && !this.state.added) {
        this.setState({ submit: true });
        await PopUpAdsService.create({
          name: values.name,
          photo: this.state.secureUrl,
          type: values.type,
          link: this.state.deepl,
          status: values.status,
        })

        console.log(response);

        if (response.data.status === 200) {
          Notification(
            'success',
            'Pop-up has been created successfully',
          );

          this.setState({ submit: false, added: true });
          setTimeout(() => {
            this.props.history.replace('/dashboard/pop-up');
          }, 2000);
        }
      }
    })
  }
  catch (error) {
    console.log(error);
    Notification(
      'error',
      `Oops! Error occured. ${error.response.data.message}`,
    );
    this.setState({ submit: false });
  }
}

edited May 30 '18 at 07:40

answered May 30 '18 at 06:35

Jee Mok

6,157
8
47
80

did you miss something? `async` **`function`** `handleSubmit` ? – Jaromanda X May 30 '18 at 06:39
I'm sorry I just edited my code ,you can take a look for update – Satria stuart May 30 '18 at 07:01
I see, then it should be `this.props.form.validateFieldsAndScroll(async (err, values) => { ...` – Jee Mok May 30 '18 at 07:11
@JaromandaX well depends on the context, if it is inside a react component as an event handler then he wouldn't need the `function`, otherwise yeah – Jee Mok May 30 '18 at 07:13
@Satriastuart I have just updated my answer, and btw I think your code is missing a few closing brackets – Jee Mok May 30 '18 at 07:41
yes,that's what I'm talking albout .thanks it work now @JeeMok – Satria stuart May 30 '18 at 07:56

React Asyn function, Await is a reserved word error

1 Answers1