Карта Object.keys возвращает объект Object вместо значения в форме ввода текста в ReactJS

Question

Я пытаюсь получить некоторые значения из массива JSON по какому-то http-адресу.Поэтому, когда я кладу с карты в поле ввода, я получаю объект вместо значения.За пределами поля ввода работает нормально.

    <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>})}

Внутри <FormGroup> Я получил Объект.Внешний является необходимым значением.Что я делаю не так?

Answer 1

в настоящее время JSX-преобразователь преобразует <p>... в компонент (объект) React, а затем передает его в input как value.Для отображения содержимого переменной браузер вызывает метод .toString().так что, наконец, вы видите "[объект объекта]" там.В зависимости от ваших потребностей вам потребуются различные изменения.

Скажите, если вы ожидаете увидеть разметку HTML внутри ввода (например, строку), вы должны сделать ее строковой (скажем, используя строки шаблона):

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

Или вы просто не должны помещать его в <input value, если вам нужно увидеть его как живую HTML-разметку