Confusion with .then() chaining

I've been trying to understand how Promises/then-ables work for awhile now.
I'm working with NextJS.

Trying to chain together to do the following:

1. Get data from API
2. Save the data
3. Modify the data to create component
   (And not infinite loop)

I can't get the proper data to do step #3.
I've tried various things but am stuck on this step.

I'm using useEffect because of this (though I'm sure there's other ways to do it):
https://nextjs.org/docs/basic-features/data-fetching/client-side

export default function Survey() {
  const [dataDB, setDataDB] = useState('');
  let roles;
  function createCards(rolesArr) {
    let role1 = tabs.find(x => x.id == rolesArr[0])
    let role2 = tabs.find(x => x.id == rolesArr[1])
    let role3 = tabs.find(x => x.id == rolesArr[2])
    // the above is null
    // the below is also null:
    //     let role1 = tabs.find(x => x.id == dataDB[0])
    roles.push(role1)
    roles.push(role2); 
    roles.push(role3); // component will map over these 3
  }
  useEffect(() => {
    fetch('example.com/api')
      .then((response) => response.json()) // 1. Gets an array like [0, 3, 5]
      .then((data) => {
        setData(dataDB) // 2. Using hook to setData, will store in database later
      }
     .then((rolesArr) => createCards(rolesArr)) // 3. Modify data for component
    })
  )  
  return ( 
    { 
      roles.map((path) => (
        <Card key={path.id}>
          <Text>{path.title}</Text>
        </Card>
      ))
    } 
  )
}

You have a lot of problems here.

roles is undefined

let roles; creates a variable and sets its value to undefined.

The next time you touch it (here: roles.map((path) => () you are trying to treat it as an array.

This will error.

You need to make it an array when you define it.

a typo

> .then((data) => {
> setData(dataDB) // 2. Using hook to setData, will store in database later
> }

You are missing a ) from the end of there

rolesArr is undefined

The return value of:

> .then((data) => {
> setData(dataDB) // 2. Using hook to setData, will store in database later
> }

… is undefined because you have no return statement, so the next then() callback in the chain gets passed undefined.

However you aren't doing anything that requires you to create a new promise there, so there's no point in using an extra then, just do everything you want to do with the data in the function you already have.

  .then((data) => {
    setData(dataDB);
    createCards(dataDB);
  });

createCards modifies an array that doesn't exist and that nothing uses

> roles.push(role1)
> roles.push(role2);
> roles.push(role3); // component will map over these 3

You have the same problem here that you did earlier; roles isn't an array, it is undefined.

What's more, because createCards is called asynchronously, this code will run after roles.map((path) => ( so nothing is going to pay attention to the mutation anyway.

Don't mutate the non-existent array. Create a new one and store it in a state. Setting a state will trigger a re-render so the component will pull the array out of the state storage and have some values to iterate over.

Typically you would want to do something like:

const [roles, setRoles] = useState(null);
function createCards(rolesArr) {
    // etc
    setRoles([role1, role2, role3]);
}
// etc
if (roles === null) {
    return <p>Loading</p>;
}
return roles.map(etc etc);

When using the .then(), you need to return the resulting value from the previous callback function if you want to chain one or more .then(). As an example:

fetchData()
  .then((response) => {
    console.log(response.json())
    return response.json()
  }).then((values) => {
    console.log(values)
    return values.filter((value) => value > 0)
  }).then((positiveValues) => {
    console.log(positiveValues)
    return positiveValues;
  })

This example will print the response.json() and return it as a value to be used as an argument on the next .then() callback.

For your case, return the value inside the second callback like this:

    fetch('example.com/api')
      .then((response) => response.json()) // 1. Gets an array like [0, 3, 5]
      .then((data) => {
        setData(dataDB) // 2. Using hook to setData, will store in database later
        return dataDB;
      }).then((rolesArr) => createCards(rolesArr)) // 3. Modify data for component
    })