looping the array of json object in reactjs

Question

I am new in reactjs. I have problem while showing the result.Here is my code:

constructor (props) {
      super(props);
       this.state = {
         selectValue: '',
         yearsValue:'',
         months:''
       }
     this.setDataGroup = this.setDataGroup.bind(this);
   }

setDataGroup(e){
    var selectedType = e.target.value;
    if(selectedType == "quertly"){
       var quertlyData = [{
        data:"Jan-March",
        value:"1"
      },
      {
        data:"Apr-Jun",
        value:"2"
      },
      {
        data:"Jul-Sept",
        value:"3"
      },
      {
        data:"Oct-Dec",
        value:"4"
      }];
       this.setState({yearsValue:quertlyData});

I am showing the data like:

 render() {
 const data = JSON.stringify(this.state.yearsValue) || []
                  <div>
    {data.map((data, index) => {data})}
  </div>
}

My json looks like:

[{"data":"Jan-March","value":"1"},{"data":"Apr-Jun","value":"2"},{"data":"Jul-Sept","value":"3"},{"data":"Oct-Dec","value":"4"}]

Getting error .map is not function

why stringify? the data is an array already and I am assuming you don't want to get it as a string. Also your render method is mute, what do you expect from the mapping function, since the arrow function will return undefined for all elements — Icepickle, Nov 13 '17 at 12:11
`yearsValue` is a `string`. `JSON.stringify` won't turn it into an array. — Hemerson Carlin, Nov 13 '17 at 12:12

Hemerson Carlin · Accepted Answer · 2017-11-13T12:21:44.220

3

yearsValue is a string and therefore using JSON.stringify won't help you.

Also, render method must return something:

constructor (props) {
  super(props);
  this.state = {
    selectValue: '',
    yearsValue: [],
    months:''
  }

  this.setDataGroup = this.setDataGroup.bind(this);
}
... 
render() {
  const { yearsValue } = this.state

  return (
    <div>
      {yearsValue.map((item, index) =>
        <div key={index}>{item.data}:{item.value}</div>
      )}
    </div>
  }
}

edited Nov 13 '17 at 12:21

answered Nov 13 '17 at 12:14

Hemerson Carlin

7,354
1
27
38

`yearsValue` is an array, if it would be a string `JSON.parse` would be helpful – Icepickle Nov 13 '17 at 12:16
So it's better to user proper types than trying to `parse` on every render. Performance-wise this is a bad patern. – Hemerson Carlin Nov 13 '17 at 12:17
Yeah, I believe the OPs confusion is surrounding his constructor setup, and the `setState` method inside his `setDataGroup` function – Icepickle Nov 13 '17 at 12:20
Agree. That's why I suggested to initialize `yearsValue` as an array in the constructor. – Hemerson Carlin Nov 13 '17 at 12:22
@Karan did you change it in the constructor as well? It has to be an array, otherwise it will always break. – Hemerson Carlin Nov 13 '17 at 12:26

score 2 · Answer 2 · edited Nov 21 '17 at 16:39

2

Your data is in correct format. Initialize yearsValue as array in constructor like

this.state = {
  yearsValue: []
}

And then you can use yearsValue state in render like below

render() {
  return (
     <div>
       {this.state.yearsValue.map((d, index) => {
          return (
             <div key={index}>{d.data}</div>
          )
       })}
     </div>
  )
}

edited Nov 21 '17 at 16:39

user8976797

27
5

answered Nov 13 '17 at 12:16

Elumalai Kaliyaperumal

1,498
1
12
24

Presumably `yearsValue` could be an empty string, which wouldn't have `map` – Icepickle Nov 13 '17 at 12:18
@Icepickle - Yes correct. I have updated the answer..Hope that might work. – Elumalai Kaliyaperumal Nov 13 '17 at 12:22
Well, almost, the render method doesn't return anything yet ;) – Icepickle Nov 13 '17 at 12:24
You are close. Just missed the return from `render` – Hemerson Carlin Nov 13 '17 at 12:24
Thanks @mersocarlin – Elumalai Kaliyaperumal Nov 13 '17 at 12:27

looping the array of json object in reactjs

2 Answers2