How to loop through new input boxes renderer in React and get the values in an array?

Question

I need to dynamically generate multiple divs with a single input-box in it, so the user can add a number.

The user can add by clicking a button, any number of divs with input-box to put a number in it.

After the user end with the entry of the data, must click a button to process the data.

I've find out how to use React to iterate through an existing array, but not about how to iterate through a new DOM tree that was created dynamically by the user, and then generate an array with the values inside all the input-boxes.

After processing, different values will be displayed (max value, min value, average, return results from equations, etc)

Welcome to Stack Overflow! Please take have a look through the help center, in particular How do I ask a good question? I also recommend Jon Skeet's Writing the Perfect Question. It would make it much easier to help you updated the question with a minimal reproducible example demonstrating the problem, ideally a runnable one using Stack Snippets (the [<>] toolbar button). Stack Snippets support React, including JSX; here's how to do one. — T.J. Crowder
– T.J. Crowder, Commented Aug 26, 2020 at 13:39

T.J. Crowder · Accepted Answer · 2020-08-26 13:49:57Z

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>

I'll look more into it, thank you for your answer. I just found out about forms in React, maybe I could use that too. Thanks!

Rodrigo Cordeiro · Accepted Answer · 2020-08-26 13:49:27Z

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.

answered Aug 26, 2020 at 13:49

Rodrigo Cordeiro

214 bronze badges

1 Comment

Huagru Over a year ago

Thanks, but is not just one simple div. It's a bunch of divs, each with text, a few buttons and at least one input box. They might be 30 or 40 divs at the end.

Collectives™ on Stack Overflow

How to loop through new input boxes renderer in React and get the values in an array?

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related