How to display the content of an array inside an object in Reactjs

Question

I have a React component. When the user makes a form selection, it retrieves the following object (the content of the object varies depending on the selection made):

Data

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

Desired results

Here's what I want to display on screen when rendered:

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

My failed attempt!

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

The result of this is:

Cannot read property '0' of undefined.

And when I try it in the browser console I get "Uncaught SyntaxError: Malformed arrow function parameter list". Is anyone able to help me get my desired results?!

Many thanks!

Katie

I don't think map takes an array, shouldn't that [val,index] just be val,index? (And it looks like you may be closing your arrow function before it's started with an extra close bracket) — DBS
– DBS, Commented Apr 8, 2020 at 8:47

Siva Kondapi Venkata · Accepted Answer · 2020-04-08 09:18:37Z

2

Object.entries method is meant to get array from object, But your "values" is already array, So directly use the map

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

answered Apr 8, 2020 at 9:18

Siva Kondapi Venkata

11.1k2 gold badges20 silver badges32 bronze badges

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

Comments

norbitrial · Accepted Answer · 2020-04-08 08:53:31Z

1

You don't really need Object.entries(). Simply using .map() on jsonObj.values and accessing on each iteration the current array of elements and showing up e[0] and e[1] for <label>.

Instead you can do it easier like the following:

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

See the following example:

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)

I hope this helps!

edited Apr 8, 2020 at 8:53

answered Apr 8, 2020 at 8:48

norbitrial

15.2k10 gold badges39 silver badges66 bronze badges

Collectives™ on Stack Overflow

How to display the content of an array inside an object in Reactjs

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