How to change name of a tag in react js

Question

How to add/change the name of an input tag within jsx? may be the terms used are wrong as i'm novice in react js. In the table header i need to add radio buttons along with the header text and each header should have different radio button names. I was able to add the radio buttons but facing trouble in giving them a dynamic name (preferably the headers index which is shown in the below code )

import React, { Component } from "react";
import "./Table.css";
import { Button } from "./Button";
import { Table } from "react-bootstrap";
class Tables extends Component {
  constructor(props) {
    super(props);
    this.state = {
      project: {},
      selectedFile: null,
      uploaded: null,
      resp_data: "",
      clicked: 0,
    };
    this.checked = this.checked.bind(this);
  }

  headers = this.props.data[0];
  body = this.props.data[1];
  checked(event) {
    this.setState({ clicked: 1 });
  }

  render() {
    const clicked = this.state.clicked;
    let radio_buttons;
    if (this.props.param === "OneRadio") {
      radio_buttons = <input name="select-radio" type="radio"></input>;
    } else {
      radio_buttons = (
        <>
          **{/* headers contains a list of 10 elemets and each radio button should have different 
           name */}**
          <br />
          <label className="label_label">Radio x</label>
          <input name="select-radio" type="radio"></input>
          <br />
          <label className="label_label ">Radio y</label>
          <input name="select-radio" type="radio"></input>
        </>
      );
    }

    return (
      <div className="table-div">
        <Table responsive bordered hover>
          <thead>
            <tr>
              {this.headers.map((header, index) => (
                <th key={index}>
                  <label>{header}</label>

                  {/* here radio button for each header is displayed 
                  but for each iteration the radio buttons name should be appended with the index */}
                  
                 {radio_buttons}
                </th>
              ))}
            </tr>
          </thead>
          <tbody>
            {this.body.map((items, index) => (
              <tr>
                {items.map((subItems, sIndex) => (
                  <>
                    <td>{subItems}</td>
                  </>
                ))}
              </tr>
            ))}
          </tbody>
        </Table>
        <Button buttonStyle="btn--secondary" buttonSize="btn--small">
          view data
        </Button>
      </div>
    );
  }
}

export default Tables;

Expected Output:

Current Output :

It would be a great help if someone could guide me through this. And i would like to know if there is any better way to write this whole code since it is my first time with react

Answer 1

You can use map callback's index to set different names for each radio input:

import React, { Component } from "react";
import "./Table.css";
import { Button } from "./Button";
import { Table } from "react-bootstrap";
class Tables extends Component {
  constructor(props) {
    super(props);
    this.state = {
      project: {},
      selectedFile: null,
      uploaded: null,
      resp_data: "",
      clicked: 0,
    };
    this.checked = this.checked.bind(this);
  }

  headers = this.props.data[0];
  body = this.props.data[1];
  checked(event) {
    this.setState({ clicked: 1 });
  }

  render() {
    const clicked = this.state.clicked;
    let header_radio_buttons = this.headers.map((header, index) => {
        if (this.props.param === "OneRadio") {
              radio_buttons = <input name="select-radio" type="radio"></input>;
            } else {
              radio_buttons = (
                <>
                  **{/* headers contains a list of 10 elemets and each radio button should have different
                   name */}**
                  <br />
                  <label className="label_label">Radio x</label>
                  <input name={"select-radio" +  (index+1)} type="radio"></input>
                  <br />
                  <label className="label_label ">Radio y</label>
                  <input name={"select-radio" +  (index+1)} type="radio"></input>
                </>
              );
            }
        return(
               <th key={index}>
                 <label>{header}</label>
                 {radio_buttons}
                </th>
        );
    });

    let radio_buttons;


    return (
      <div className="table-div">
        <Table responsive bordered hover>
          <thead>
            <tr>
                 {header_radio_buttons}

            </tr>
          </thead>
          <tbody>
            {this.body.map((items, index) => (
              <tr>
                {items.map((subItems, sIndex) => (
                  <>
                    <td>{subItems}</td>
                  </>
                ))}
              </tr>
            ))}
          </tbody>
        </Table>
        <Button buttonStyle="btn--secondary" buttonSize="btn--small">
          view data
        </Button>
      </div>
    );
  }
}

export default Tables;