import React, { Component } from "react";


class CheckColor extends Component {
  constructor(props) {
    super(props)
    this.state = { 
      color: '',
      shoes: [
        {name: 'Black Shoe', color: 'Black', price: 180},
        {name: 'Red Shoe', color: 'Red', price: 120},
        {name: 'White Shoe', color: 'White', price: 100}
      ]
    }

    this.handleColorChange = this.handleColorChange.bind(this)
  }

  handleColorChange(e) {
    const color = e.target.value
    this.setState({ color: color })
  }

  render() {
    const colors = ['Black', 'Red', 'White']
    return(
      <form>
        {colors.map((color, index) => 
          <label key={index}>
            {color}
            <input 
            value={color}
            checked={this.state.color === color}
            onChange={this.handleColorChange}
            type="radio"
            />
          </label>
        )}
      </form>
    )
  }
}

export default class App extends Component {
  render() {
    return (
      <div className="App">
        <CheckColor />
      </div>
    );
  }
}