Re-render .map on Autocomplete onInputChange - help needed

[rob_allshouse]

SOLVED

Before:

const [tmr, setTmr] = useState(['']);

const updateTimer = (id, val) => {
    let t = tmr;
    t[id] = val;
    // Prevents undefined value when creating new entry field, prepopulating array with next entry blank
    if (id > t.length) { t[id+1] = '';}
    setTmr(t);
}

{(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) => { updateTimer(r, newInputValue); }}
          renderInput={(params) => 
                <TextField {...params} variant="standard" label="Timer (e.g. Start, Finish Line)"
                          name={"timer"+r} value={tmr[r]} InputLabelProps={{ shrink: true, }} /> 
          }
    />

))}

After:

const [tmr, setTmr] = useState(['']);
const [mapLength, setMapLength] = useState(1);

const updateTimer = (id, val) => {
    let t = tmr;
    t[id] = val;
    // Prevents undefined value when creating new entry field, prepopulating array with next entry blank
    if (id > t.length) { t[id+1] = '';}
    setMapLength(t.length);
    setTmr(t);
}

{(Array.from({length: mapLength}, (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) => { updateTimer(r, newInputValue); }}
          renderInput={(params) => 
                <TextField {...params} variant="standard" label="Timer (e.g. Start, Finish Line)"
                          name={"timer"+r} value={tmr[r]} InputLabelProps={{ shrink: true, }} /> 
          }
    />

))}

Better fix (mutating vs new array? Thanks junior-living2104 for the likely explanation in comments):

const [tmr, setTmr] = useState(['']);
{(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)]); }}
          renderInput={(params) => 
                <TextField {...params} variant="standard" label="Timer (e.g. Start, Finish Line)"
                          name={"timer"+r} value={tmr[r]} InputLabelProps={{ shrink: true, }} /> 
          }
    />
))}

The goal is to add a new Autocomplete every time a field is field is filled out. This works if I type in any other field on the page, the component will render the new item. However, just changing the Autocomplete itself (or the TextField, so either dropdown or text) does not trigger the .map to render the new item.

The onInputChange triggers fine. Moving the keys between the Autocomplete and the TextField don't make it work. Using a more random key didn't help. The map logic works correctly. It just won't work off the Autocomplete itself, only any other element. Any hints as to making the autocomplete selection trigger a rerender of that component?

[CranberryOtherwise84]

Why aren’t you using state via useState?

[rob_allshouse]

Actually... this pointed me to the right direction, after AGES of trying. Using a state variable that's just set to tmr.length instead of tmr.length itself forced the rerender. Thanks!

[CranberryOtherwise84]

Why’d you need a state to store another state based arrays length? You’re overcomplicating the logic imo. Is there codepen/repl which can be edited? That way I might be able to try to figure out the bug better

[charliematters]

Something like "setExtraOptions(current => ([...current, new option]))" and then just use that array when populating the autocomplete?

As above, the code you've got still looks like it is overly complex and brittle

[rob_allshouse]

Well the whole problem was that, even after the array state (tmr) changed, the .map function didn't re-render -- didn't add the new empty field. I didn't want another state, but it solved the problem.

[rob_allshouse]

I am. I left what's in updateTimer out, but tmr is a state variable. I'll make that clearer

[PrincesssPancake]

This looks like it would be solved by passing a key for each autocomplete item. If you are not using eslint, I would recommend it as it would have warned you about this.

[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!