moonformeli

class Quiz extends Component {
  componentWillMount() {
    axios.get('/thedata').then(res => {
      this.setState({items: res.data});
    });
  }

  render() {
    return (
      <ul>

moonformeli

class Quiz extends Component {
  // Added this:
  constructor(props) {
    super(props);

    // Assign state itself, and a default value for items
    this.state = {
      items: []
    };
  }

moonformeli

render() {
  return (
    <ul>
      {this.state && this.state.items && this.state.items.map(item =>
        <li key={item.id}>{item.name}</li>
      )}
    </ul>
  );
}

moonformeli

class Quiz extends React.Component {
  constructor(props) {
    super(props);
    
    // Initialized, but not enough
    this.state = {};
  }

  componentWillMount() {
    // Get the data "soon"

moonformeli

function ItemList({ items }) {
  return (
    // same as above
  );
}
ItemList.propTypes = {
  items: React.PropTypes.array.isRequired
};

moonformeli

class MyComponent extends React.Component {
  render() {
    // ...
  }
}
MyComponent.defaultProps = {
  items: []
};

moonformeli

class MyComponent extends React.Component {
  static defaultProps = {
    items: []
  }

  render() {
    // ...
  }
}

moonformeli

class MyComponent extends React.Component {
  render() {
    const { items = [] } = this.props;

    return (
      <ItemList items={items}/>
    );
  }
}

moonformeli

const { items = [] } = this.props;

moonformeli

function ItemList({ items = []}) {
  return (
    // Use items here. It'll default to an empty array.
  );
}