0

const PizzaComponent = (props) => {
    const {
        size
    } = props

    const pizzaChoices = [
      {
        value: 'cheese',
        label: 'Cheese',
        price: '10.00',
      },
      {
        value: 'pepperoni',
        label: 'Pepperoni',
        price: size,
      },
    ];

    return (
        {
          pizzaChoices.map((choice, i) => (
            <MyFancyComponent
              key={`pizza-${choice.value}`}
              label={choice.label}
              price={choice.price}
              value={choice.value}
              />
          ))
        }   
    )   
}
|

    1

    1

    function MyFancyComponent({label, price, value}) {
      return (
        <div>
          {label} - {price} - {value}
        </div>
      );
    }
    
    function PizzaComponent(props) {
        const {
            size
        } = props
    
        const pizzaChoices = [
          {
            value: 'cheese',
            label: 'Cheese',
            price: '10.00',
          },
          {
            value: 'pepperoni',
            label: 'Pepperoni',
            price: size,
          },
        ];
    
        return (
          <div>
            {pizzaChoices.map((choice, i) => (
                <MyFancyComponent
                  key={`pizza-${choice.value}`}
                  label={choice.label}
                  price={choice.price}
                  value={choice.value}
                  />
              ))
            }   
          </div>
        )   
    }
    
    class App extends React.Component {
      componentWillMount() {
        this.state = {
          size: 5
        };
        
        this.changeSize = this.changeSize.bind(this);
      }
      changeSize() {
        const size = this.state.size + 5;
        this.setState({ size });
      }
      render() {
        return (
          <div>
            <button onClick={this.changeSize}>Change Size</button>
            <PizzaComponent size={this.state.size} />
          </div>
        );
      }
    }
    
    ReactDOM.render(<App />, document.getElementById('root'));

    |