Setting property values

React component properties are set by passing JSX attributes to the component when it is rendered. In Chapter 8, Validating Component Properties, I'll go into more detail about how to validate the property values that are passed to components. Now let's create a couple of components that expect different types of property values:

import React, { Component } from 'react';

export default class MyButton extends Component {
  render() {
    const { disabled, text } = this.props;

    return <button disabled={disabled}>{text}</button>;
  }
}

This simple button component expects a Boolean disabled property and a string text property. Let's create one more component that expects an array property value:

import React, { Component } from 'react';

export default class MyList extends Component {
  render() {
    const { items } = this.props;

    return (
      <ul>
        {items.map(i => (
          <li key={i}>{i...