Q:

How can I append objects to the body of a component in React?

I am trying to set up some functionality on this React component so that a user can add and remove empty radio button options to a page that a user can type text into. The only issue that I am having is that I am relatively new to React and am not 100% how to do this.
import React, { Component } from 'react';

class TextRadio extends Component {
    constructor() {
        super();

        state = {
            textValue: ""
        }

    };

    handleInputChange = event => {
        const value = event.target.value;
        const name = event.target.name;

        this.setState({
            [name]: value
        });
    }

    addBox = () => {

    }

    removeBox = () => {

    }

    render() {
        return(
            <div>
                <div className="form-check">
                    <input className="form-check-input" type="radio" id="" name="" value="" />
                    <label className="form-check-label" for="">
                        <input class="form-control" type="text" placeholder="" />
                    </label>
                </div>
                <div className="form-check">
                    <input className="form-check-input" type="radio" id="option" name="option" value="option" />
                    <label className="form-check-label" for="option">
                        <input class="form-control" type="text" placeholder="" />
                    </label>
                </div>
                <div className="form-check">
                    <input className="form-check-input" type="radio" id="option" name="option" value="option" />
                    <label className="form-check-label" for="option">
                        <input class="form-control" type="text" placeholder="" />
                    </label>
                </div>
                <button type="button" className="btn btn-primary" onClick={this.addBox}>
                    Add Option
                </button>
                <button type="button" className="btn btn-danger" onClick={this.removeBox}>
                    Remove Option
                </button>
            </div>
        );
    }
}

export default TextRadio;

The result that I am expecting to happen is to have it so the component can add and remove radio button options from the page depending on the button that the user presses

A:

i was completed just your addBox and RemoveBox functions, i hope that's help you
import React, { Component } from "react";

class TextRadio extends Component {
  constructor() {
    super();

    this.state = {
      radioButtons: []
    };
  }

  handleInputChange = event => {
    const value = event.target.value;
    const name = event.target.name;
  };

  addBox = () => {
    this.setState(prevstate => {
      let radioButtons = prevstate.radioButtons;
      if (radioButtons.length === 0) {
        radioButtons.push({
          id: 1,
          name: "radiobutton",
          value: "test"
        });
        return {
          radioButtons: radioButtons
        };
      } else {
        radioButtons.push({
          id: radioButtons[radioButtons.length - 1].id + 1,
          name: "raiodButton_" + (radioButtons[radioButtons.length - 1].id + 1),
          value: radioButtons[radioButtons.length - 1].value
        });
        return {
          radioButtons: radioButtons
        };
      }
    });
  };

  removeBox = () => {
    this.setState(prevstate => {
      let radioButtons = prevstate.radioButtons;
      if (radioButtons.length !== 0) {
        radioButtons.pop(radioButtons[radioButtons.length - 1]);
        return {
          radioButtons: radioButtons
        };
      } else {
        return { radioButtons: radioButtons };
      }
    });
  };

  render() {
    return (
      <div>
        <div className="form-check">
          {this.state.radioButtons.map(radiobutton => {
            return (
              <div>
                <input
                  className="form-check-input"
                  type="radio"
                  id={radiobutton.id}
                  name={radiobutton.name}
                  value={radiobutton.value}
                />
                <label className="form-check-label" for="">
                  <input class="form-control" type="text" placeholder="" />
                </label>
              </div>
            );
          })}
        </div>
        <button type="button" className="btn btn-primary" onClick={this.addBox}>
          Add Option
        </button>
        <button
          type="button"
          className="btn btn-danger"
          onClick={this.removeBox}
        >
          Remove Option
        </button>
      </div>
    );
  }
}

export default TextRadio;

https://codesandbox.io/embed/confident-browser-tmojp

