How do I have a button that triggers a new text box to be created? (react)

Question

I have a first textbox and a "+" button that I want to click, to create a new textbox below it. It needs to continue making textboxes under the previous one.

Here is the code for my textbox:

import React, { Component } from "react";

class Textbox extends Component {
  state = { boxtext: "" };

handleChange = () => {
// The line below creates a copy of the state, using the spread operator
let fields = { ...this.state.boxtext };
fields = fields + "+";
this.setState({ fields });
};

render() {
return (
  <div
    style={{
      position: "absolute",
      left: "50%",
      top: "17%",
      transform: "translate(-50%, -50%)",
    }}
    className="form-group"
  >
    <label for="exampleLogicSymbol">Logic Operator</label>
    <input
      type="text"
      className="form-control"
      id="exampleInputLogic"
      aria-describedby="logicHelp"
      placeholder="enter formula"
      onChange={this.props.handleInput}
      value={this.props.content}
    ></input>
  </div>
 );
 }
}

export default Textbox;

Answer 1

One immediate solution I can think of is maintaining a state of an array with the number of elements equal to the box to be displayed in the UI and displaying the boxes by mapping over the array. Of course, there could be another optimum solutions.

import React, { Component } from "react";

class Textbox extends Component {
  state = { 
      boxtext: "",
      addBox: []
    };

handleChange = () => {
    let fields = { ...this.state.boxtext };
    fields = fields + "+";
    this.setState({ fields });
};

//Handle box addition click
addTextBox = () => {
    const boxAdded = [...this.state.addBox]
    boxAdded.push(1)
    this.setState({
        addBox: boxAdded
    })
}

render() {
    return (
            <div
                style={{
                position: "absolute",
                left: "50%",
                top: "17%",
                transform: "translate(-50%, -50%)",
                }}
                className="form-group"
            >
                <label for="exampleLogicSymbol">Logic Operator</label>
                <input
                    type="text"
                    className="form-control"
                    id="exampleInputLogic"
                    aria-describedby="logicHelp"
                    placeholder="enter formula"
                    onChange={this.props.handleInput}
                    value={this.props.content}
                />
                <button onClick={this.addTextBox}>+</button>
                {
                    this.state.addBox.map(()=>{
                        return(
                            <input
                                type="text"
                                className="form-control"
                                id="exampleInputLogic"
                                aria-describedby="logicHelp"
                                placeholder="enter formula"
                            />
                        )  
                    })
                }
            </div>
        );
    }
}

export default Textbox;