Add your own Label and Value to create a Form

FormRepeater.js

import React from "react";
import { Label, FormGroup, Input, Row, Col } from "reactstrap";
import { Delete, Plus } from "react-feather";

export default class FormRepeater extends React.Component {
	constructor(props) {
		super(props);

		this.state = {
			value: "",
			label: "",
			newItems: [],
		};
	}

	updatevalue(event) {
		const { name, value } = event.target;
		this.setState({ [name]: value });
	}

	handleClick() {
		var newItems = this.state.newItems;

		newItems.push({ label: this.state.label, value: this.state.value });

		this.setState({
			newItems: newItems,
			value: "",
			label: "",
		});
	}

	handleItemChanged(i, event) {
		var newItems = this.state.newItems;
		newItems[i].value = event.target.value;

		this.setState({
			newItems: newItems,
		});
	}

	handleItemDeleted(i) {
		var newItems = this.state.newItems;

		newItems.splice(i, 1);

		this.setState({
			newItems: newItems,
		});
	}

	renderRows() {
		var context = this;

		return this.state.newItems.map(function (o, i) {
			return (
				<div key={"item-" + i}>
					<Label>{o.label}</Label>
					<FormGroup className="has-icon-left position-relative">
						<Input
							type="text"
							value={o.value}
							onChange={context.handleItemChanged.bind(
								context,
								i
							)}
						/>
						<div className="form-control-position">
							<Delete
								size={15}
								onClick={context.handleItemDeleted.bind(
									context,
									i
								)}
							/>
						</div>
					</FormGroup>
				</div>
			);
		});
	}

	render() {
		return (
			<div>
				<p>Custom Data </p>
				<div>{this.renderRows()}</div>
				<hr />
				<Label>Add newItems</Label>
				<Row>
					<Col>
						<FormGroup>
							<Input
								type="text"
								name="label"
								placeholder="label"
								value={this.state.label}
								onChange={this.updatevalue.bind(this)}
								required
							/>
						</FormGroup>
					</Col>
					{"  "}
					<Col>
						<FormGroup>
							<Input
								type="text"
								name="value"
								placeholder="value"
								value={this.state.value}
								onChange={this.updatevalue.bind(this)}
							/>
						</FormGroup>
					</Col>
					{"  "}
					<Plus size={15} onClick={this.handleClick.bind(this)} />
				</Row>
			</div>
		);
	}
}