how to print the elements value inside an object react using es6

Question

i have an array of objects and i want to print the content of each element inside this each object, i have tried the method provided in this(Render Object properties in React) and what i got is just a list of the elements without its values

state={
  machines: [{
        MachineName: 'A1',
        region: 'west', 
        zones:'west-01',
        ipAddr:'1.1.1.1',
        subnet:'test'}, 
      {
        MachineName: 'A2',
        region: 'west', 
        zones:'west-01',
        ipAddr:'1.1.1.2',
        subnet:'test2'

}]

}
      render() {
const machinespc=this.state.machines.map((value,key)=>{

  return (
    <div>
        <div className="col-md-4" key={key}>
            <div className="dashboard-info">

                {Object.keys(value).map((val, k) => {
                    return (<h4 k={k}>{val}</h4>)
                    })
                }

            </div>
        </div>
    </div>
)

})
  return (

{machinespc} )

and the out put was like below,

    MachineName
    region 
    zones
    ipAddr
    subnet

so what i want is to print the values of each element inside the object like below:

     A1
    west
    west-01
    1.1.1.1
    test'}

Object.keys returns an array of key names, therefore, your return line should look like return (<h4 k={val}>{value[val]}</h4>). Maybe naming your variables with meaningful names would have helped. — Mathieu de Lorimier
– Mathieu de Lorimier, Commented Feb 20, 2018 at 14:49

Mayank Shukla · Accepted Answer · 2018-02-20 14:04:48Z

8

Issue is you are running loop of keys, so you need to use that key to get the value, Like this:

{
    Object.keys(value).map((val, k) => <h4 k={k}>{value[val]}</h4>)
}

Or you can use Object.values, it will return the array of all the values, like this:

{
    Object.values(value).map((val, k) => <h4 k={k}>{val}</h4>)
}

Check this snippet, you will get a better idea:

let obj = {a:1, b:2};

console.log("keys array = ", Object.keys(obj));

console.log("values array = ", Object.values(obj));

edited Feb 20, 2018 at 14:04

answered Feb 20, 2018 at 14:04

Mayank Shukla

105k19 gold badges163 silver badges146 bronze badges

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

Comments

Jonas Wilms · Accepted Answer · 2018-02-20 14:04:03Z

3

Just use Object.entries:

{Object.entries(value).map(([key, value]) => {
      return (<h4>{key} : {value}</h4>);
}) }

answered Feb 20, 2018 at 14:04

Jonas Wilms

139k20 gold badges164 silver badges164 bronze badges

Comments

Davin Tryon · Accepted Answer · 2018-02-20 14:03:12Z

1

You just need to lookup the value from your val:

{Object.keys(value).map((val, k) => {
    const theValue = value[val];
    return (<h4 key={k}>{theValue}</h4>)
    })
}

Object.keys(value) will return you an array of all the object's keys. You then need to get the value (value[val]).

answered Feb 20, 2018 at 14:03

Davin Tryon

67.4k15 gold badges149 silver badges139 bronze badges

Collectives™ on Stack Overflow

how to print the elements value inside an object react using es6

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related