Call Function(that render component) in async Function

Question

Good day everyone.

I have problem with this piece of code:

It's 2 function:

1.renderModal() - it's responsible for rendering ModalSuccess at the moment where data sucesfully will be added to databbase (to inform user about correctly fill form.

Component ModalSuccess when call it's render modal.

2.submitToServer - it's sending all data from redux-form to API.

In end of try, i trying call function renderModal.

How can i make it correctly?

function renderModal() {
  return (
    <div>
      <ModalSuccess/>
    </div>
  );
}

//async function send to server
export async function submitToServer(values) {

  //FUND
   try {
    let response = await fetch('endpoint', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        ...authHeader()
      },
      body: JSON.stringify(values),

    });

    let responseJson = await response.json();
    return responseJson;

    renderModal();

  } catch (error) {
    console.error(error);
  }

I call submitTo server in 2 places:

1.

export var submit =(values) =>{

          let isError =false;

          if (isError) {
            //  throw new SumissionError(error);
          } else{
            return submitToServer(values)
              .then(data =>{
                  if (data.errors)  {
                    console.log(data.errors);
                      throw new SubmissionError(data.errors);
                  } else{
                      console.log(values)
                      console.log('server added data to database');
                  }
              });
          }
}

2.

<form onSubmit={handleSubmit(submitToServer)}>

can you please show some code from where you are calling submitToServer — Raghav Garg
– Raghav Garg, Commented Sep 27, 2018 at 14:08

Shubham Gupta · Accepted Answer · 2018-09-27 13:45:39Z

2

I think you can restructure your code a bit better. Instead of returning the modal you can just mount the modal once and control its visibility leveraging the state.

Take a look at how I think your component should be structured.

class Comp extends React.Component {
  state = {
    isOpen: false
  };
  submitToServer = async values => {
    try {
      let response = await fetch("endpoint", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          ...authHeader()
        },
        body: JSON.stringify(values)
      });

      let responseJson = await response.json();
      this.setState({ isOpen: true });
      return responseJson;
    } catch (error) {
      console.error(error);
    }
  };
  render() {
    /* your component */
    <ModalSuccess isOpen />;
  }
}

answered Sep 27, 2018 at 13:45

Shubham Gupta

2,6461 gold badge10 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Piotr Żak Over a year ago

@Shubbham Gupta I need a access to submitToServer from others outside components.

Ariel Salem · Accepted Answer · 2018-09-27 13:41:45Z

1

As it stands your renderModal() invocation will never register since you are returning once the response it has been returned.

What you'd need to is something like this:

let responseJson = await response.json();
if (responseJson) {
  renderModal();
}

answered Sep 27, 2018 at 13:41

Ariel Salem

3573 silver badges12 bronze badges

Collectives™ on Stack Overflow

Call Function(that render component) in async Function

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related