Отображение массива JSON в React

Question

У меня есть JSON в качестве ответа, и мне нужно сопоставить его, используя React. Сам JSON является массивом, и он также содержит массив, и мне нужно сопоставить все объекты и каким-то образом узнать имена переменных.

Это мой JSON. Есть ли способ сделать это?

[
   {
      "name":{
         "english":"name1",
         "finnish":" name2"
      },
      "imageList":[
         "xyxyxyxy"
      ]
   }
]

Итак, я попытался сопоставить его, используя это:

{this.state.imageData.map((item, key) =>
    <p>Device name: {item.name}, En device name: {item.name.english}</p>
)}

Но я получаю сообщение об ошибке, что он не знает, что "engli sh "is:

Objects are not valid as a React child (found: object with keys {english, finnish}). If you meant to render a collection of children, use an array instead.

Я получаю JSON как ответ от fetch:

let images = await fetch(`myurl` + id);
return await images.json();

Мне нужно иметь возможность отображать каждый объект в list, а затем также сопоставить данные в imageList.

Итак, как в примере выше, я хотел бы сделать что-то вроде:

this.state.imageData.map((item, key) =>
    <p>Device name: {item.name}, En device name: {item.name.english}</p>
    for(image: item.imageList){
            console.log(image)
        }

Answer 1

Ошибка говорит об этом -

Objects are not valid as a React child (found: object with keys {english, finnish}). If you meant to render a collection of children, use an array instead.

Вы пытаетесь визуализировать {item.name}, который является объектом. Если вы хотите отобразить объект в структуре объекта, сделайте это -

{this.state.imageData.map((item, key) =>
    <p>Device name: {JSON.stringify(item.name)}, En device name: {item.name.english}</p>
)}

Чтобы отобразить массив imageList внутри вашего json, вы можете сделать это -

{this.state.imageData.map((item, key) =>
    <div>
       <p>Device name: {JSON.stringify(item.name)}, En device name: {item.name.english}</p>
       {item.imageList.map((image, key) => <p>.....</p> )} //what you want to render
    </div>
)}