score:0

I think you could just create one div, and an array to store the values, then create a function that everytime the user choose to add a new value, it saves the current on that array and clean the input. So, when the user select to process the data it takes that array and do what you need.

score:2

Without seeing your code it's hard to help, but you probably want to use controlled inputs rather than uncontrolled ones, and so you'd have an array of the current values for the inputs as state information.

For instance, in a functional component using hooks:

const { useState } = React;

function Example() {
    // The values we use on the inputs
    const [values, setValues] = useState([]);

    // Update the value at the given index
    const updateValue = (value, index) => {
        setValues(values =>
            Object.assign([], values, {[index]: value})
        );
    };
    
    // Add an input
    const addInput = () => {
        setValues(values => [...values, ""]);
    };

    // Get the sum (just an example; and one of the very few places I'll use `reduce`)
    const sum = values.reduce((sum, value) => sum + Number(value), 0);

    // Render as many inputs as we have values, along with the
    // button to add an input and the sum
    return (
        <div>
            <div>
            {values.map((value, index) =>
                <div key={index}>
                    <input type="text" value={value} onChange={evt => updateValue(evt.target.value, index)} />
                </div>
            )}
            </div>
            <div>Sum: {sum}</div>
            <input type="button" value="Add Input" onClick={addInput} />
        </div>
    );
}

ReactDOM.render(<Example/>, document.getElementById("root"));
<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.0/umd/react-dom.production.min.js"></script>


Related Query

More Query from same tag