从两个输入字段在React中创建数组

Question

嘿，感谢您阅读我的问题。我只在过去5周内学习编码，因此，如果我对内容的解释不够清楚，请原谅我。

基本上，我正在创建一个预算应用程序。您输入预算，项目名称和成本并将其相加。然后，您可以提交另一个项目及其成本等。我要捕获数组中的项目名称和成本，然后在另一个组件中呈现项目/成本/剩余预算的列表。到目前为止，我已经能够从输入字段中获取数据，但是我不确定如何在要从中提取输入数据并将其传递给下一个组件的组件中创建新数组。

  class FormInput extends Component {
        state = {};
        constructor(props) {
          super(props);
          this.state = {
            budget: null,
            itemName: null,
            itemCost: null,
          };
        }
        handleSubmit = (event) => {
          event.preventDefault();
          const data = this.state;
          console.log(data);
        };

        handleInputChange = (event) => {
          // console.log(event);
          // console.log(event.target.name);
          // console.log(event.target.value);
          this.setState({
            [event.target.name]: event.target.value,
          });
        };

        render() {
          const { budget, itemName, itemCost } = this.state;

          return (
            <React.Fragment>
              <Card className="bg-light container border-0">
                <Card.Header
                  className=" bg-light container border-0"
                  as="h1"
                  style={{
                    alignitems: "center",
                    textAlign: "center",
                    color: "darkgrey",
                  }}
                >
                  {" "}
                  BUDGET APP{" "}
                </Card.Header>
                <Card.Body>
                  <Card.Title
                    style={{
                      alignitems: "center",
                      textAlign: "center",
                      fontWeight: "bold",
                      color: "blue",
                    }}
                  >
                    {" "}
                    Calculate Your Budget{" "}
                  </Card.Title>

                  <Container
                    className="rounded-lg"
                    style={{ backgroundColor: "lightgrey" }}
                  >
                    <p> Budget is {budget} </p>
                    <p> Item is {itemName} </p>
                    <p> Cost is {itemCost} </p>
                    <Form onSubmit={this.handleSubmit} className="p-3">
                      <Form.Group
                        onChange={this.handleInputChange}
                        controlId="budget"
                      >
                        <Form.Label className="bold ">Budget</Form.Label>
                        <Form.Control
                          type="number"
                          name="budget"
                          placeholder="Enter Budget"
                        />
                      </Form.Group>

                      <Form.Group
                        onChange={this.handleInputChange}
                        controlId="itemName"
                      >
                        <Form.Label>Item</Form.Label>
                        <Form.Control
                          type="text"
                          name="itemName"
                          placeholder="Input items"
                        />
                      </Form.Group>

                      <Form.Group
                        onChange={this.handleInputChange}
                        controlId="itemCost"
                      >
                        <Form.Label>Item Cost</Form.Label>
                        <Form.Control
                          type="number"
                          name="itemCost"
                          placeholder="Input items cost"
                        />
                      </Form.Group>

                      <Button variant="primary" type="submit">
                        Submit
                      </Button>
                    </Form>{" "}
                  </Container>
                </Card.Body>
              </Card>
            </React.Fragment>
          );
        }
      }

      export default FormInput;