React rendering trello card names

debugcn Published at Dev

Sudoscience

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.

Mario Tacke

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>
    );
  }
}

Collected from the Internet

Please contact [email protected] to delete if infringement.