Reactjs - updating an array with multiple dynamic form fields

JavaScript
1

Howdy, Campers.

I have a react app with two child components, one that has a single static input field and one that has multiple dynamic input fields.

Basically, I am struggling to find how to set each individual dynamic input field to a corresponding element on an array. So far, I am able to make the new fields render in the view and accept input, and am also able to increment an array each time a new field is created. But so far I cannot get whatever is in the new field to appear in the corresponding element of the array.

I have been struggling with this for a couple of days so any possible help is appreciated greatly.

Here is my code by the way in GitHUb: https://github.com/olddognewtrix123/kyle/tree/master/public

Thank you everyone.

1 Like
2

If I understand you correctly, you want two inputs to modify a single array at two different indexes?

3

No, the first component (the one called ‘Req’) that just has the one static field can be totally disregarded for this problem.

I’m struggling with the other component called ‘Roles.’

‘Roles’ lets you click to add dynamic text input fields that you can then type stuff into. Also when you click to create a new field, ‘Roles’ increments an array called ‘inputs.’

So, in ‘Roles’ if I click to add a new input field, the array called ‘inputs’ gains an element at position 0. If I click to add a second field, ‘inputs’ gains an element at position 1.

What I now want to do is when I type stuff into the first dynamically created field, I want element 0 to update with that data. When I type stuff into the second dynamically created field, I want element 1 of ‘inputs’ to update with that data.

So far I have not been able to figure out how to connect the fields to a corresponding array element.

4

I see. You’re actually over complicating things then. You don’t need a separate counter for the number of inputs since you’re using map(). The function that map() takes accepts the element’s index as the second parameter. I would then have whatever function you pass in as props.onChange accept the index one of the arguments. Changing the array is a bit more complicated because we can’t directly edit the state.

function updateInputsArray(index, newValue) {
    //copy the array first
   const updatedArray = [...this.state.inputs];
   updatedArray[index] = newValue;
   this.setState({
        inputs: updatedArray,
    });
}

There are at least a couple of ways to send the index into your function. Here’s one

{this.props.inputs.map((input, index) => <input type = "text" key={input}  placeholder='Enter something here' onChange={e => this.props.onChange(index, e.target.value)}/>)}
2 Likes
5

@PortableStick

i could be wrong but isn’t having an arrow at the render discouraged and anti-pattern?
https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-no-bind.md

6

You’re not wrong, and I would prefer the solution eslint supplies, but that would have taken more time to explain and I’m lazy. That input should very much be its own component.

7

Thank you! This seems to be closer to working. If I enter, “w”, the element is updated to “w.”

However, if I sit and type a word like “cat,” the element updates to “t” (actually, it updates from “c” to “a” to “t”)

I have to figure out how to get to capture whatever is in the field onChange (so that if I enter “cat,” it updates from “c” to “ca” to “cat”).

Regardless, I think you have put me on the right track.

I was banging my head against a brick wall over this since yesterday. What do you think are the gaps in my knowledge? What tutorials or google search terms might you suggest to help me better understand the solution you have provided?

Thank you again.

8

I think you might need to try and understand React at a more fundamental level, since some of its logic isn’t quite like vanilla JS at first.

Understanding props, state and how react uses ‘this’ is key to using it for anything productive.

I personally struggled through for weeks until it clicked and I understood that often I don’t have to do anything with state unless the element is going to change something about itself.

I found this article very useful in metaphorically grasping React state, props and logic: https://medium.freecodecamp.org/react-props-state-explained-through-darth-vaders-hunt-for-the-rebels-8ee486576492

Following along to youtube tutorials on React is also useful - it may feel stupid to be writing single-page to-do list apps, but once you understand how components interact it really opens React up for you.

1 Like
9

The problem is that since I am changing the state of the input array the whole page re-renders. A workaround for now is to employ a temporary interim array and then not update the main ‘input’ array from the interim array until the user moves on.

Sheeshe.

I actually already built a working version of this application in plain javascript and I use the javascript application at my job. Trying to write a React version has been fun but at times exceedingly difficult.

10

I just read the article. Terrific!

11

Good solutions thanks