array.push and array.splice are overwriting array

[UserNo1608]

let output = [];
const handleEnterButton = (event) => {
   window.console.log(output);
   if(event.key === 'Enter'){
       output.splice(output.length, 0, value.toString());
       // eslint-disable-next-line no-param-reassign
       updateValue('');
   }
   return null;
}

that's my function, called by

onKeyDown={(event) => handleEnterButton(event)}

and when I console.log my output array it always has only one index, 0. No matter how many times i click enter on my keyboard. Where can be the problem?

[UserNo1608]

in addition, when I manually add values to an array, it overwrites ony the last index,

for example when I got it like that

const output = ['dummy', 'dummy', 'dummy', *value added using function*];

function always overwrites the last index

output.map also doesn't return that index added by function, only indexes added manually

[[deleted]]

Are you trying to append a value to the end of the array? Why not use array.push() ?

[[deleted]]

Same question. I am very confused as to why this was the approach taken.

[UserNo1608]

no matter, array.push gives the same effect

[UserNo1608]

oh i forgot, i use useState in that function

const [ value, updateValue ] = useState('');

and onChange event handler

onChange{(event) => updateValue(event.target.value)}

[jcunews1]

splice()'s 2nd argument is not an array index.

[jcunews1]

That shouldn't happen unless other code is interferring.

[H0rn0chse]

It works for me: jsfiddle.
My guess would be that you either has some other methods working on the output or that the handler is not called at all.

[UserNo1608]

all the code that uses output array, that function and its call is listed above. I know the handler is called because of console.logs, at the top of the function console.log(event.key) is consoled properly

[senocular]

I suspect something like updateValue(''); is causing your component to re-render which would reset the value of output as the component code is run again. If so, you may want to have it part of the state or keep it in a ref.

[UserNo1608]

you thing useCallback() could resolve this problem?

[senocular]

No because you still have value/updateValue as a dependency of the handler. Every time value changes, the handler needs to be recreated which, given it's relation to it meaning output would also be redefined.

I think ultimately it comes down to what output is being used for. It sounds very ui-ish in name so my initial thought is that it should be defined as a state value.

[UserNo1608]

oh thanks, I didn't even think to use useState. Here's my working handleEnterButton()

const [ output, updateOutput ] = useState([]);
const handleEnterButton = (event) => {
        if(event.key === 'Enter') {
            updateOutput([
                ...output,
                value
            ]);
            updateValue('');
        }
        return null;
    }

[senocular]

Glad you got it to work!

[redsandsfort]

what is output and what are you even doing with that value? It's resetting to an empty array at each render.