React rendering trello card names

Question

I have a react app which has a component as such:

import React, { Component } from 'react';
import '../css/TrelloCards.css';

class TrelloCards extends Component {
  componentDidMount() {
    const authenticationFailure = () => { console.log('Auth failure') };
    const trello = window.Trello;

    const getCards = () => {
      const error = (error) => {
        console.log(error);
      }
    const cards = (cards) => {
      console.log(cards);
    }
    trello.get('/member/me/cards', cards, error);
  }

  trello.authorize({
      type: 'redirect',
      name: 'React Trello',
      scope: {
        read: 'true',
        write: 'true' },
      expiration: 'never',
      success: getCards,
      error: authenticationFailure,
      response_type: 'token',
    });
  }

  render() {
    return(
      <h1>Placeholder</h1>
    );
  }
}

export default TrelloCards;

I've successfully console logged my cards, but now I want to render them on the page, I've tried

render() {
  return(
    <ul>
      {cards}
    </ul>
  );
}

I've tried mapping through cards like:

cards.map(card => {
  return(
    <li>{card.name}</li>
  );
}

But I get the error that 'cards' is not defined. I'm pretty new to React and programming in general, any help would be appreciated.

Answer 1

In your case render does not have access to the cards you downloaded through trello (they are only accessible within componentDidMount). One way to get around this is to save the downloaded cards to the react state. render will then be invoked because the state changed and the cards will be rendered.

Example

class TrelloCards extends Component {
  constructor() {
    this.state = {
      cards: []      <-------- define your initial state
    }
  }

  componentDidMount() {
    const trello = window.Trello;

    trello.authorize({
      type: 'redirect',
      name: 'React Trello',
      scope: {
        read: 'true',
        write: 'true' },
      expiration: 'never',
      success: () => console.log('auth success'),
      error: () => console.log('auth failure'),
      response_type: 'token',
    });

    trello.get('/member/me/cards', 
      (cards) => this.setState({ cards }),
                      ^----  set state here (shorthand)
      (error) => console.log('could not get cards'))
    }
  }

  render() {
    return(
      <div>
        {this.state.cards.map(card =>
          <li>{card.name}</li>)}
          ^---- render cards from state
      </div>
    );
  }
}