I'm creating a flashcard app and I'm currently trying to set the front side of the flashcard to some text from an API.

My state:

```
const [deckWithCards, setDeckWithCards] = useState([]);

```

`deckWithCards` is a deck of flashcards and it looks like:

```
{name: 'Test Name', description: 'Test Description', id: 3, cards: Array(4)};

```

When I do `deckWithCards.cards` I get:

```
[{id: 1, front: 'Front of card', back: 'Back of Card', deckId: 1}]

```

If I was to have 4 cards in a deck, I'll get an array with 4 of these objects with the corresponding data.

I need access to all of this information however, when I try to do `deckWithCards.cards.front`, I get "Cannot read property 'front' of undefined."

I also tried looping through the cards array like:

```
let arr = [];
let allCards = deckWithCards.cards;
for (let i = 0; i < allCards.length; i++) {
   arr.push(allCards.front);
}

```

This gave me: "Cannot read property 'length' of undefined."

How do I gain access to the items in this cards array?

Helper functions:

```
export async function readDeck(deckId, signal) {
  const url = `${API_BASE_URL}/decks/${deckId}?_embed=cards`;
  return await fetchJson(url, { signal });
}

export async function listCards(deckId, signal) {
  const url = `${API_BASE_URL}/cards?deckId=${deckId}`;
  return await fetchJson(url, { signal });
}

```

How I set my State:

```
useEffect(() => {
    const abortController = new AbortController();

      readDeck(deckId, abortController.signal)
      .then(setDeckWithCards)
      .catch(setError)

      listCards(deckId, abortController.signal)
        .then(setCards)
        .catch(error)

      return () => abortController.abort();
  }, []);

```