React JS - produce list of divs from JSON array

Question

I have a React class, which takes in a JSON array and should produce a set of divs:

import React, { Component } from "react";
import "./Maps.css";
import df3 from "./data/df3.json"
import sample from "./data/sample.json"


class Maps extends Component {
  constructor() {
    super();
    const data = df3;
    this.state = data
  }

  render()

  {
    var df4 = df3["ds"]
    var d1 = '';
    for (var key in df4)
    {
       var host = df4[key];
       d1 += '<div class="'+key+'" value="'+host[0]+'"/>';
    }

    return (

      <div id="Maps">

         </div>

    )
  }
}

export default Maps

So far, it is not returning the set of divs.

Here is the JSON:

{"ds":[{
  "s1": {
    "0": 0.0,
    "1": 2.0,
    "2": 0.0,
}
  "s1": {
    "0": 0.0,
    "1": 2.0,
    "2": 0.0,
}
  "s3": {
    "0": 2.0,
    "1": 2.0,
    "2": 0.0,
}}]}

which, when fed to the class, should output the following divs:

<div class="s1" value="0"/><div class="s2" value="0"/><div class="s3" value="2"/>

but I'm not sure how to return it, and when i console log d1, i get:

<div class="0" value="undefined"/>

any ideas, as always, are helpful!

In addition to that, once d1 holds the array of divs, you need to put {d1} in the rendered output — Robin Zigmond
– Robin Zigmond, Commented May 20, 2020 at 18:16

Todor Popov · Accepted Answer · 2020-05-20 19:58:29Z

2

Your render method does not return anything but an empty div.

A correct example would be:

render() {
    const myArray = df3["ds"];
    return myArray.map(item => (
        Object.keys(item).map(key => (
            <div key={key} className={key} value={item[key]["0"]} /> 
        )
    ))
}

edited May 20, 2020 at 19:58

answered May 20, 2020 at 19:07

Todor Popov

1818 bronze badges

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

3 Comments

neutrino Over a year ago

what i really want is the first value in the sub nodes. s1 should have a value of 0, s2 should have value of 0, s3 should have value of 2

Todor Popov Over a year ago

Just updated my comment. It should be now what you are looking for!

Todor Popov Over a year ago

Each "key" is equal to "s1", "s2", "s3" Each item[key]["0"] is equal to 0.0, 0.0, 2.0

Collectives™ on Stack Overflow

React JS - produce list of divs from JSON array

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related