Reactjs onChange event returns element not an object

Question

I have this code.

<Grid item md={4} sm={2} xs={12}>
            <TextField
              label="Qty"
              name="qty"
              id="qty"
              variant="filled"
              type="number"
              fullWidth
              onChange={itemChange}
              value={item.qty}
            ></TextField>
          </Grid>
          <Grid item md={4} sm={2} xs={12}>
            <TextField
              label="Unit price"
              name="unitPrice"
              variant="filled"
              type="number"
              fullWidth
              onChange={itemChange}
              value={item.unitPrice}
            ></TextField>
          </Grid>

In my itemChange method, I console log the e.target

 const itemChange = async (e) => {
    console.log("e", e.target);
    setItem({ ...item, [e.target.name]: [e.target.value] });
  };

I got this

But I expect to get an object. So then I can use target.value or target.name.

Why could this happen?

I don't see anything unexpected here. e.target is the element that triggered the event (in this case, the input). What were you expecting it to be? — ray
– ray, Commented Sep 29, 2020 at 0:37
to acess the value returned from onChange of TextField from MUI you should acess it like in most cases. e.target.value. Where target is a DOM node that triggered the event and value is the actual value captured by the onChange event — Dupocas
– Dupocas, Commented Sep 29, 2020 at 0:43

vahissan · Accepted Answer · 2020-09-29 00:52:53Z

3

It is an object. But it is displayed like this in the console because it's a DOM element. You can right-click on the console where it says <input ... and choose "Store as global variable" in the context menu. That will store e.target as temp1. Then you can try different things like temp1.value and temp1.name in the console.

answered Sep 29, 2020 at 0:52

vahissan

2,32216 silver badges26 bronze badges

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

Comments

Steve · Accepted Answer · 2020-09-29 03:26:20Z

2

Perhaps you are simply confused because of the way the browser prints the object. This is certainly an object, so you can add .value or .name onto the end of e.target._____ and get your result.

You can confirm this is an object if you add to your itemChange function:

console.log(typeof e.target);
// or even this:
console.log(e.target.toString())

Don't forget in Javascript, the following are the only things that are not objects:

null
undefined
strings
numbers
boolean
symbols

Yet even then, they have their counterparts that are objects.

E.g String is an object wrapper for a string type. An object that will represent (and allow you to alter) a sequence of characters.

edited Sep 29, 2020 at 3:26

answered Sep 29, 2020 at 1:16

Steve

5,1711 gold badge35 silver badges46 bronze badges

Collectives™ on Stack Overflow

Reactjs onChange event returns element not an object

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related