looping the array of json object in reactjs [duplicate]

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
– Icepickle, Commented Nov 13, 2017 at 12:11
yearsValue is a string. JSON.stringify won't turn it into an array. — Hemerson Carlin
– Hemerson Carlin, Commented Nov 13, 2017 at 12:12

Hemerson Carlin · Accepted Answer · 2017-11-13 12:21:44Z

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, 2017 at 12:21

answered Nov 13, 2017 at 12:14

Hemerson Carlin

7,4241 gold badge29 silver badges38 bronze badges

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

5 Comments

Icepickle Over a year ago

yearsValue is an array, if it would be a string JSON.parse would be helpful

Hemerson Carlin Over a year ago

So it's better to user proper types than trying to parse on every render. Performance-wise this is a bad patern.

Icepickle Over a year ago

Yeah, I believe the OPs confusion is surrounding his constructor setup, and the setState method inside his setDataGroup function

Hemerson Carlin Over a year ago

Agree. That's why I suggested to initialize yearsValue as an array in the constructor.

Hemerson Carlin Over a year ago

@Karan did you change it in the constructor as well? It has to be an array, otherwise it will always break.

user8976797 · Accepted Answer · 2017-11-21 16:39:40Z

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, 2017 at 16:39

user8976797

275 bronze badges

answered Nov 13, 2017 at 12:16

Elumalai Kaliyaperumal

1,5301 gold badge13 silver badges24 bronze badges

5 Comments

Icepickle Over a year ago

Presumably yearsValue could be an empty string, which wouldn't have map

Elumalai Kaliyaperumal Over a year ago

@Icepickle - Yes correct. I have updated the answer..Hope that might work.

Icepickle Over a year ago

Well, almost, the render method doesn't return anything yet ;)

Hemerson Carlin Over a year ago

You are close. Just missed the return from render

Elumalai Kaliyaperumal Over a year ago

Thanks @mersocarlin

Collectives™ on Stack Overflow

looping the array of json object in reactjs [duplicate]

2 Answers 2

5 Comments

5 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

5 Comments

Linked

Related