问在ReactJS中，单选按钮呈现

EN

{
   [id: 1,
   name: Test data,
   option:{ "numeric", "alpha-numeric", "special characters", "language change" ] ....}
}

import React, { Component } from "react";
import { PageHeader, ListGroup } from "react-bootstrap";

import "./Home.css";

const url = "http://localhost:xxxx/rest/qas/2";

export default class Question3 extends Component {
  constructor(props) {
    super(props);
    this.state = {
      error: null,
      isLoaded: false,
      selectedOption: false,
      QuestionAnswer: [],
      counter: 0,
      names: ""
    };
  }

  componentDidMount() {
    fetch(url)
      .then(response => {
        console.log(response);

        return response.json();
      })
      .then(json => {
        this.setState({
          qid: json.qid,
          qtext: json.qtext,
          point: json.marks,
          ans: json.answer,
          choices: JSON.stringify(json.options)
        });
      });
  }

  // Note: it's important to handle errors here
  // instead of a catch() block so that we don't swallow
  // exceptions from actual bugs in components.

  handleNext = e => {
    e.preventDefault();
    this.props.history.push("/question4");
  };

  handlePrevious = e => {
    e.preventDefault();
    this.props.history.push("/question2");
  };

  handleOptionChange = e => {
    if (e.target.checked) {
      console.log(e.target.value);
      if (e.target.value === this.state.answer) this.props.counter += 1;
    }
  };

  render() {
    const { qid, qtext, point, ans } = this.state;

    const data = {
      option: [this.state.choices]
    };

    let radioButtons = [];

    const RadioButtons = props => {
      const { names } = props;

      return (
        <div>
          {" "}
          {names.map(n => (
            <Radio name={n} />
          ))}{" "}
        </div>
      );
    };

    const Radio = props => {
      const { name } = props;
      return (
        <div>
          <input id={name} type="radio" name="type" value={name} />{" "}
          <label for={name}> {name} </label>{" "}
        </div>
      );
    };

    //const listItems = replies.map((number) =>
    //  {number}
    //);

    return (
      <div className="q2">
        <div className="labels">
          <label for="test">
            {" "}
            {this.state.qid} {this.state.qtext}{" "}
          </label>{" "}
        </div>
        <div className="App">
          <RadioButtons names={data.option} />{" "}
        </div>
        <div className="Navigation">
          <button
            type="submit"
            className="btn btn-primary"
            onClick={this.handleNext}
          >
            Next{" "}
          </button>
          &nbsp;&nbsp;&nbsp;{" "}
          <button
            type="submit"
            className="btn btn-primary"
            onClick={this.handlePrevious}
          >
            Previous{" "}
          </button>{" "}
        </div>{" "}
      </div>
    );
  }
}