Krit GGWP

radio-group.js

class ParentComp extends React.Component {
  constructor(props) {
    super(props);
    this.state = { choice: [] };
  }
  render() {
    return (
      <RadioGroup
        onChange={value => this.setState({ choice: value })}
        value={this.state.choice}
      />
  }
}

class RadioGroup extends React.Component {
  onAdd = () => {
    const { value } = this.props;
    this.props.onChange([...value, 'NEW CHOICE!!!!!!!!']);
  }
  onRemove = (idx) => {
    const { value } = this.props;
    this.props.onChange([
      ...value.slice(0, idx),
      ...value.slice(idx + 1)
    ]);
  }
  onTypeChoice = (newText, idx) => {
    const { value } = this.props;
    this.props.onChange([
      ...value.slice(0, idx),
      newText,
      ...value.slice(idx + 1)
    ]);
  }
  render() {
    const { value } = this.props;
    return (
      <div>
        <ul>
          {value.map((item, idx) => (
            <li>
              <input type="text" value={item} onChange={e => this.onTypeChoice(e.target.value, idx)} />
              <a className="delete" onClick={() => this.onRemove(idx)}>Delete</a>
            </li>
          ))}
        </ul>
        <a className="add" onClick={this.onAdd}>Add</a>
      </div>
    )
  }
}