0

I am looping through my achievements props to display a series of divs:

const listItems = this.props.todo.achievements.map((achievement) =>
  <div className="cell" key={achievement.id}>
     {achievements[achievement.id].label}
  </div>
);`

How can I pull the label out of a json I'm importing from a local file?

{
 "achievements":[
  {
     "label":"one",
     "id":0
  },
  {
     "label":"two",
     "id":1
  },
  {
     "label":"three",
     "id":2
  },
  {
     "label":"four",
     "id":3
  },
  {
     "label":"five",
     "id":4
  }]
 }

In my root reducer I have my initial state which stores the achievement id.

If I output {achievement}, I only get the number. Should I set my intital state to store the label, rather than store it in a local json file?

const initialState = [
  {
    date: "Fri 1st",
    enjoyments: [1,2,3],
    achievements: [1,3,2],
    id: 0
  },
  {
    date: "Fri 2",
    enjoyments: [1,3,2],
    achievements: [1,3,2],
    id: 1
  },
Bomber
  • 10,195
  • 24
  • 90
  • 167
  • Like @felix said, you should have access to the label property in the map callback, just wanted to point out that the "achievements" array is currently a typo in your json => "achievementa" – abhi May 23 '17 at 21:37

1 Answers1

1

achievement is already one of the objects in the array. You just have to access its label property:

{achievement.label}

Have a look at the following posts to learn more about JSON and objects (they are not the same):

Felix Kling
  • 795,719
  • 175
  • 1,089
  • 1,143