Set dynamic Id and Value for Radio Buttons in React

Set dynamic id and htmlFor values for radiobutton and label in react

Say we have 10 radio buttons in a row and the user can click any one radio button, likewise, each and every row has 10 radio buttons and therefore there are 10 rows (say). The data from database varies with respect to number of radio button's label values. I can be able to only select one radio button from the first row and I cannot able to select at least one radio button from all of the rows. How to do it dynamically in react? 

Therefore, how to check at least one radio button from all of the rows containing multiple radio buttons?

constructor(props) {
    super(props);
    this.state = {
      buttonDisabled: true,
      radio: 0,
      cards: [],
    };
    this.submitHandler = this.submitHandler.bind(this);
  }

  componentDidMount = () => {
    this.setState({
      cards: this.props.data.matrix,
    });
    console.log("matrix", this.props.data.matrix);
  };

  submitHandler = (event) => {
    event.preventDefault();
    console.log("button clicked", this.state);
    this.setState({
      buttonDisabled: false,
    });
  };

  changeRadioHandler = (event) => {
    this.setState({
      buttonDisabled: false,
      radio: event.target.value,
    });
    console.log("checked", event.target.value);
  };

  render() {
    return (
      <div class="matrix-bd">
        {this.props.data.header_text && (
          <div class="header-qn">
            <h5>{this.props.data.header_text} </h5>
          </div>
        )}
        {this.props.data.matrix && (
          <div class="grid">
            {this.props.data.matrix.option_questions.map((questions, i) => (
              <div class="rows">
                <div class="cell main">{questions.text}</div>
                {this.props.data.matrix.options.map((element) => {
                  return (
                    <div class="cell" key={i}>
                      <input
                        type="radio"
                        id={i}
                        name={questions.text}
                        onChange={this.changeRadioHandler}
                        required
                      ></input>
                      <label htmlFor={i}>{element.text}</label>
                    </div>
                  );
                })}
              </div>
            ))}
          </div>
        )}
        <div class="buttonsubmit text-right">
          <button
            type="button"
            id="QstnSubmit"
            name="QstnSubmit"
            class="btn btn-primary"
            disabled={this.state.buttonDisabled}
            onClick={this.submitHandler}
          >
            Submit
          </button>
        </div>
      </div>
    );
  }