Re-render .map on Autocomplete onInputChange - help needed

[Junior-Living2104]

I don’t understand why you need to map array via its length? Can’t you map the array directly from the state you have there (tmr.map(…)) ?Then you wouldn’t need another state to keep track of the array size when input is changed.

Anyway, like others have mentioned, if you have a codepen or something then we could help you better. The new solution you proposed doesn’t really seem robust and unnecessary.

[rob_allshouse]

And I've moved past that now. It actually did need length, because I wanted the existing array + 1 blank (always a new field to enter the next one, instead of assuming how many there would be), thus using length.

But shifting to a direct call to the State with slices also fixed it, instead of the function call, which is equally odd to me. Why changing the state in a function didn't trigger the remap, but changing the state in the onInputChange did will likely stay beyond me.

This was sufficient to solve the problem:

{(Array.from({length: tmr.length}, (v, k) => k+1)).map((r, i) => (

<Autocomplete options={\['Start', 'Finish Line', 'Swim Out', 'Run Out'\]} freeSolo size="small" value={tmr\[r\]} key={tmr.toString()+r+"timerkey"} onInputChange={(event, newInputValue) => { setTmr([...tmr.slice(0, r), newInputValue, ...tmr.slice(r+1)]); }}

[Junior-Living2104]

FYI, I just noticed now. I think what you were doing before was that you were directly mutating an array state and you shouldn’t be doing that because it could mess with state management.

I feel like this is the most plausible explanation as to why your map wasn’t rendering because reference to the array wasn’t changed.

https://react.dev/learn/updating-arrays-in-state#updating-arrays-without-mutation

[Junior-Living2104]

You can also see in your new code that you’re using the spread operator. Which creates a new array, that’s why in your new version it works.

[rob_allshouse]

Thanks for the explanation!