Why Promise pending?

Question

JavaScript

Guys, hello everyone.
there is such a function

import axios from "axios";

const isValidEmail = email => {
  console.log(email);
  const endpoint = process.env.REACT_APP_EMAIL_VALIDATION;
  const url = `${endpoint}&email=${email}`;
  return axios.get(url).then(result => {
    return result.data.format_valid;
  });
};

export default isValidEmail;

Next, it is imported into the react component and called in the render

import React from "react";
import FormEmailInput from "./FormEmailInput";
import { Field } from "redux-form";
import withDisabled from "components/connectors/withDisabled";
import PropTypes from "prop-types";
import { flatten } from "lodash";
import hasValue from "utilities/hasValue";
import isValidEmail from "utilities/isValidEmail";

export class FormGroupField extends React.Component {
  requiredValidation = value => {
    const { formDisabled } = this.context;
    const { disabled, required } = this.props;

    if (formDisabled || disabled) return;
    if (!required || hasValue(value)) return;
    // if (isValidEmail(value)) {
    //   return;
    // } else {
    //   return "Invalid Format";
    // }
    return "This field is required";
  };
  emailValidation = value => {
    return isValidEmail(value);
  };
  render() {
    const { validate } = this.props;
    console.log(isValidEmail("[email protected]"));
    return (
      <FormEmailInput
        renderChildren={Field}
        {...this.props}
        validate={flatten([
          this.requiredValidation,
          this.emailValidation,
          validate
        ])}
      />
    );
  }
}

FormGroupField.contextTypes = {
  formDisabled: PropTypes.bool
};

FormGroupField.defaultProps = {
  required: false,
  disabled: false, // only disable the built-in validation
  validate() {} // validation still works here
};

export default withDisabled(FormGroupField);

Why does the console outputPromise {<pending>}

Answer 1

You are not working correctly with asynchronous code. Calling it in render is wrong.
What do you want to do?
To work with Promise -based asynchronous calls , use the then method or async/await functions.
An example of using the then method :
An example of using async/await :

async someHandler() {
  const result = await isValidEmail("[email protected]");

  return someAction(result);
}

async someOtherHandler() {
  const result = await isValidEmail("[email protected]");
  
  /* вызов someOtherAsyncAction тоже возвращает Promise, поэтому ждем 
     и возвращаем только когда придет результат, для этого используем 
     ключевое слово await                                             */
  return await someOtherAsyncAction(result); 
}

Answer 2

Validation result output.

isValidEmail("[email protected]")
.then( (result) => {
  console.log(result);
})
.catch( (err) => {
  console.log(err);
})