Как отобразить содержимое массива внутри объекта в Reactjs

Question

У меня есть компонент React. Когда пользователь делает выбор формы, он извлекает следующий объект (содержимое объекта варьируется в зависимости от сделанного выбора):

Данные

jsonObj={
 "name":"main",
 "type":"meat",
 "values":[
      ["chicken","Roast chicken with vegetables"],
      ["beef","Beef and Yorkshire pudding"]
]}

Желаемые результаты

Вот что я хочу отобразить на экране при визуализации:

<div>
    <label htmlFor="chicken">Roast chicken and vegetables</label>
</div>
<div>
    <label htmlFor="beef">Beef and Yorkshire pudding</label>
</div>

Моя неудачная попытка!

Object.entries(jsonObj["values"]).map(([val,index]))=>{
    return(
        <div>
            <label htmlFor={val[index][0]}>{jsonSub[key][1]}:</label>
        </div>
    )
}

Результат этого:

Невозможно прочитать свойство '0' из неопределенного.

И когда я пробую его в консоли браузера, я получаю "Uncaught SyntaxError: Неправильный список параметров функции стрелки ". Кто-нибудь может помочь мне получить желаемые результаты ?!

Большое спасибо!

Кат ie

Answer 1

Object.entries метод предназначен для получения массива из объекта, но ваши "значения" уже массив, поэтому непосредственно используйте map

jsonObj["values"].map(([html, text]) => (
  <div>
    <label htmlFor={html}>{text}</label>
  </div>
));

Answer 2

Тебе не нужно Object.entries(). Просто используя .map() на jsonObj.values и получая доступ на каждой итерации к текущему массиву элементов и показывая e[0] и e[1] для <label>.

Вместо этого вы можете сделать это проще, как показано ниже:

jsonObj.values.map(e => {
   return <div>
       <label htmlFor={e[0]}>{e[1]}</label>
   </div>
});

См. Следующий пример:

const jsonObj = {
 "name":"main",
 "type":"meat",
 "values":[
      ["chicken","Roast chicken with vegetables"],
      ["beef","Beef and Yorkshire pudding"]
]}

const result = jsonObj.values.map(e => {
   // just returning a template literal for representation
   return `<label htmlFor="${e[0]}">${e[1]}</label>`;
});

console.log(result)

Надеюсь, это поможет!