React.js only reading first if statement

Question

I'm making a textbox that either handlesclick on enter or changes text to SVG on space click. However, react is only considering the first if statement, using else works, but else if gets completely ignored.

textbox code:

<input type="text" id="textbox" contentEditable="true" className="grinputbox"
    onChange={(e) => {setInput(e.target.value)}}
    onKeyPress={twoCalls}
/>

TwoCalls function:

const twoCalls = (e) => {
    if (e.key === "Enter") {
        console.log("enter");
        handleClick()
    } else if (e.key === "Space") {
        console.log("space");
        toSVG()
    }
}

It does console log enter on pressing enter, however no space on pressing space

Note that keypress/onkeypress are deprecated, according to MDN: developer.mozilla.org/en-US/docs/Web/API/Document/…. It would be better to switch to using keydown/onkeydown — Peter B
– Peter B, Commented Aug 29, 2021 at 22:35

Robin Zigmond · Accepted Answer · 2021-08-29 22:16:11Z

2

There is no such key property as "Space". The value to check against for a user's press on the space key is a literal space character: " ". You can find this directly from https://keycode.info/ (press space), or indirectly from the MDN documentation. (The part that says "If the pressed key has a printed representation, the returned value is a non-empty Unicode character string containing the printable representation of the key.")

So in short, replace

else if (e.key === "Space" )

with

else if (e.key === " " )

answered Aug 29, 2021 at 22:16

Robin Zigmond

18.3k2 gold badges25 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

JS_INF · Accepted Answer · 2021-08-29 22:45:35Z

1

There's deferant between e.key, e.code in key some browser return space as " " and in some old browsers return it as "Spacebar" if you want the most support for space with key you can make it like the following

if(e.key === "Enter") {
  //Some code
} else if(e.key === " " || e.key === "Spacebar") {
 //Some code
}

on the other side there's also e.code who will return space as Space if you want to use Space you can make your code like that

if(e.key === "Enter") {
  //Some code
} else if(e.code === "Space") {
 //Some code
}

but for better support use e.key here's a list with key values
also there's some other things like e.keyCode who is deprecated so avoid use it

edited Aug 29, 2021 at 22:45

answered Aug 29, 2021 at 22:38

JS_INF

4653 silver badges10 bronze badges

Comments

bad_coder · Accepted Answer · 2021-08-30 00:20:35Z

0

I think it's because of this: e.key === 'Space' it should be e.key === 'Spacebar'.

edited Aug 30, 2021 at 0:20

bad_coder

13.2k20 gold badges59 silver badges95 bronze badges

answered Aug 29, 2021 at 22:27

Zeamanuel Belay

506 bronze badges

1 Comment

Peter B Over a year ago

Spacebar is used only by some antique browsers, according to this: developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/…

Collectives™ on Stack Overflow

React.js only reading first if statement

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related