Object.keys map return object Object instead value in text input form in ReactJS

Question

I'm trying to get some values from the JSON array on some http-address. Therefore, when I put from the map in the input field, I got an Object instead of a value. Outside the input field, it works fine.

    <FormGroup>
         <Label for="description">Description</Label>
         <Input type="text" name="description" id="description" value={Object.keys(item.storeByClothes).map(clothes =>{return <p>{item.storeByClothes[clothes].description}</p>})}
           onChange={this.handleChange} autoComplete="description"/>
    </FormGroup>
{Object.keys(item.storeByClothes).map(clothes =>{return <p>{item.storeByClothes[clothes].description}</p>})}

Inside <FormGroup> I got the Object. External is a necessary value. What am I doing wrong?

What can you tell us about your <FormGroup>, <Label> and <Input> components? Did you build them? Are they from a library? We'll need that info to know their default behavior with the props you've passed them. — Andy Taton
– Andy Taton, Commented Aug 26, 2018 at 16:23
I think I had a syntax error. I removed the tags and return - operator, and now work fine. Thanks, your remark has turned my attention to check the code again. — naut92
– naut92, Commented Aug 26, 2018 at 16:25

skyboyer · Accepted Answer · 2018-08-27 05:59:48Z

1

currently JSX transpiler converts <p>... into React component (object) and then passes it into input as its value. To display variable's content browser calls .toString() method. so finally you see "[Object object]" there. Depending on your needs you need different changes made.

Say if you expect to see HTML markup inside input(like a string) you should make it string(say using template strings):

.map(el => `<p>....`

Or you just should not put it into <input value if you need to see it as live HTML markup

edited Aug 27, 2018 at 5:59

answered Aug 26, 2018 at 16:25

skyboyer

24k7 gold badges65 silver badges72 bronze badges

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

Collectives™ on Stack Overflow

Object.keys map return object Object instead value in text input form in ReactJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related