реагировать состояние отображения на элементы списка

Question

У меня проблемы с отображением моего состояния в серию элементов списка. По какой-то причине dom отображает сопоставленный список, а затем внезапно выдает ошибку: Не удается прочитать свойство 'map' из неопределенного

Я упускаю что-то невероятно очевидное, но не могу его найти! ; (

 state={
    allCards: '',
    currentDeck: [
      {
        name: 'card1',
        color: 'black',
      },
      {
        name: 'card2',
        color: 'blue',
      },
      {
        name: 'card3',
        color: 'red',
      }
    ],
    blue: 1,
    black: 1,
    white: 1,
    green: 1,
    red: 1
  }

<div className="currentD">
              <h4>Deck List</h4>
              <ul>
              {
                  this.state.currentDeck.map((card)=>{
                    return(
                      <li>{card.name}</li>
                    )
                  })
              }
              </ul>
            </div>

Answer 1

Вы можете проверить это - ваш код работает - https://codesandbox.io/s/zealous-ellis-uw5rd

export default class App extends React.Component {
  state = {
    allCards: "",
    currentDeck: [
      {
        name: "card1",
        color: "black"
      },
      {
        name: "card2",
        color: "blue"
      },
      {
        name: "card3",
        color: "red"
      }
    ],
    blue: 1,
    black: 1,
    white: 1,
    green: 1,
    red: 1
  };
  render() {
    return (
      <div className="App">
        <ul>
          {this.state.currentDeck.map((card, index) => (
            <li key={index}>
              {card.name}-{card.color}
            </li>
          ))}
        </ul>
      </div>
    );
  }
}