Custom Component (from Office Hours #4)

UI Builder
1

I’m working through Vlad’s Office Hours 4 presentation and finding it very useful (for a newbie getting into HTML/React/JS/JSX). I have an issue and a question, relating to my current custom component code:
Index.js
index.js
events
events

  1. The Issue:
    Retrurn_input
    Return_input

I’ve assumed the attributes/events are standard HTML names. However, the onChange and OnKeyDown events (in the screen-shot above) are onchange and onkeydown in HTML (HTML Event Attributes); these lower-case names don’t work in the Custom Component.

What am I missing?

  1. The question:
    onKey
    onKey

This onKey code is my attempt at ‘morphing’ a W3Cschools example (KeyboardEvent key Property) into this custom component (following Vlad’s onChange example event). It runs, but returns ‘undefined’ (null?) for the key value. (When working this will be used to detect ‘Enter’ to terminate the input … note that this new (to me) ‘key’ property replaces the depreciated ‘keycode’; an Enter key press returns ‘Enter’ rather than 13).

Comments?

2

Hi @Jim_Austin

I believe event.target points to the input Dom element, and the element doesn’t have the key property.

Try the following:

const key=event.key
console.log(...)

Btw, I would recommend you use onKeyPress handler instead of the onKeyDown

Regards, Vlad

3

Thanks Vlad, that helped a lot! I see more about the .target property; I was (incorrectly) associating the onkey handler with the input element.

The code now ‘returns’ (via context block) the input value from the onKeyPress handler … need to work on the logic so it’s only on an Enter press.

Any comments about Issue 1 above: the all-lower-case names in HTML for the event handlers, versus the semi-camel-case names needed in the custom component element?

4

Any comments about Issue 1 above: the all-lower-case names in HTML for the event handlers, versus the semi-camel-case names needed in the custom component element?

yes, this is how it works in React, take a look at the link below

5

Thanks Vlad, your post finally got through to me that React/JSX is not HTML/JavaScript!