[Fixed] Accessing the values from Promise inside useEffect hook

Issue

const useOnfidoFetch = (URL) => {


useEffect(() => {
  const appToken = axios.get('http://localhost:5000/post_stuff')
   .then((response) => response.data.data.data.json_data)
   .then((json_data) => {
      const id = json_data.applicant_id;
      const token = json_data.onfido_sdk_token;
      return {id, token};
   });
  if (appToken) {
    console.log('this is working!');
    OnfidoSDK.init({
      // the JWT token you generated above
      token: null,
      containerId: "root",
      steps: [
        {
          type: 'welcome',
          options: {
            title: 'Open your new bank account',
          },
        },
        'document'
      ],
      onComplete: function (data) {
        console.log('everything is complete');
        axios.post('https://third/party/api/v2/server-api/anonymous_invoke?aid=onfido_webapp', {
          params: {
            applicant_id: appToken.applicant_id
          }
       });
      }
    });
  }
}, [URL]);

}

export default function() {
  const URL = `${transmitAPI}/anonymous_invoke?aid=onfido_webapp`;
  const result = useOnfidoFetch(URL, {});

    return (
       <div id={onfidoContainerId} />
    );
}

I have refactored this dozens of times already, I am getting back some values from the appToken Promise, but I need to provide the token value from that Promise to that token property inside of Onfido.init({}) and I need to provide the id to the applicant_id property and I continue to get undefined.

Solution

If you need the token for something else as well, then i would suggest storing it in useState, and triggering OnfidoSDK.init when the value of that state changes.

Like this:

const useOnfidoFetch = (URL) => {
  const [token, setToken] = useState();

  useEffect(() => {
    axios.get('http://localhost:5000/post_stuff')
      .then((response) => response.data.data.data.json_data)
      .then((json_data) => {
          const token = json_data.onfido_sdk_token;
          setToken(token);
      })
  }, [URL])

  useEffect(() => {
    if (!token) return;

    OnfidoSDK.init({
      // the JWT token you generated above
      token,
      containerId: "root",
      steps: [
        {
          type: 'welcome',
          options: {
            title: 'Open your new bank account',
          },
        },
        'document'
      ],
      onComplete: function (data) {
        console.log('everything is complete');
        axios.post('https://third/party/api/v2/server-api/anonymous_invoke?aid=onfido_webapp', {
          params: {
            applicant_id: appToken.applicant_id
          }
       });
      }
    });
  }, [token]);
}