Отображение переключателей в зависимости от константы

Question

Я хочу отобразить количество переключателей, которые равны const total_regions. Я хотел бы дать каждому другое значение.
Например, если total_regions = 5, тогда отображаются пять радиокнопок со значениями 1 - 5.

import React from 'react';

const Test = props => {

  const total_regions = (JSON.parse(JSON.stringify(props.test)).length); // gets the number of regions

  return (
    <ul>
      {props.test.map(item => {
        return <li>{item.length}</li>;
      })}
    </ul>                  
    );
  };
export default Test;

Я играл с реквизитом, пытаясь получить где-то, но я не знаю, как напечатать каждую кнопку для каждой записи с указанным значением c. Могу ли я превратить total_regions в массив и использовать отображение с ним

App. js:

import "bootstrap/dist/css/bootstrap.css";
import React from "react";
import ReactPlayer from 'react-player'
import LeftPane from "./components/LeftPane.js";
import Video from "./components/Video.js";
import Footer from "./components/Footer.js";
import Test from "./components/Test.js";
//import './App.css';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { apiResponse: [] };

  }
  // Comunicate with API
  callAPI() {
    fetch("http://localhost:9000/IntensityAPI") //React app talks to API at this url
      .then(res => res.json())
      .then(res => this.setState({ apiResponse: res }));
  }
  componentWillMount() {
    this.callAPI();
  }

  render() {
    return (
      <div className="App">
          <div class="row fixed-top fixed-bottom no-gutters"  >
            <div class="col-3 fixed-top fixed-bottom">
              <LeftPane></LeftPane>
            </div>
            <div class="offset-md-3 fixed-top fixed-bottom" >
              <Video></Video>
            </div>
            <div class=" col-3 fixed-bottom">
          //  <Footer test = {this.state.apiResponse}/>
          <Test test = {this.state.apiResponse}/>
            </div>      
            </div>

      </div>
    );
  }
}
export default App;

Answer 1

Вам просто нужно l oop поверх данных и вернуть переключатель для каждого элемента данных, я сделал пример песочницы для вас, чтобы вы посмотрели. Надеюсь, это поможет:)

https://codesandbox.io/s/great-water-c0ihx?file= / src / App. js

Answer 2

Вы можете использовать параметр index функции array :: map и сопоставить с типом радиовхода

{props.test.map((item, index) => {
  return (
    <label key={index}>
      {item}
      <input type="radio" value={index} />
    </label>
  );
})}