ReactJs - creating a dynamic list

Question

I'm making a card game. I have this json db:

{
  "characters": [   
    {    
      "name": "Character1",
      "punch":12,
      "kick":12,
      "special":15,
      "image":"character1"

    },
    {    
      "name": "Character2",
      "punch":13,
      "kick":11,
      "special":15,
      "image":"character2"  
    },         

    {   
      "name": "Character3",
      "punch":20,
      "kick":19,
      "special":10,
      "image":"character3"   
    }
  ]
}

I have this parent component that fetches the json data to pass for a child component. The data is fetched successfully.

import React, { Component } from 'react'
import Player from './Player'

var data = require('./db.json');

class Stage extends Component {
  constructor(props) {
    super(props)
    this.state = {
      characters: []
    }
  }

  componentDidMount() {
    this.setState({
      characters: data.characters
    })  
  }

  render() {
    return (

      <div className="stage">
      {console.log(this.state.characters)}
        <Player data={this.state.characters}/>
        <Player data={this.state.characters}/>
      </div>
    )
  }
}


export default Stage

Now I want to render each card for each character inside this component in a dynamic <li>. For example, I have 3 characters so I want to render 3 cards. Each one that matches for a character. How can I do it? I want to pass the properties for the <Card> component to

import React from 'react'
import Card from './Card'   

const Player = (props) => { 
  return (
    <div className="player">     
      <Card/>  
    </div>
  )
}


export default Player

I don't know how to render a dynamic html list each one with a character into the card — claudiopb
– claudiopb, Commented Mar 5, 2019 at 4:28
as a good practice and SO etiquette, try to mention what you have tried before posting, draft your question under requirement and problem statement headings. Just a suggestion :) — Sujit Y. Kulkarni
– Sujit Y. Kulkarni, Commented Mar 5, 2019 at 6:32

Matt Way · Accepted Answer · 2019-03-05 06:50:12Z

2

For this you want to use .map(). Basically you take an array, and return a set of react components from that array. For example:

const Player = ({ data }) => { 
  return (
    <div className="player">
      {data.map((character, i) => (     
        <Card key={i} name{character.name}/>  
      ))}
    </div>
  )
}

Here I have passed the name key down into each card, but you can pass whatever you want (including the entire character object if that makes sense).

Also, I would rename data to characters as this makes more sense. And I would set a default to the prop to be an empty array.

edited Mar 5, 2019 at 6:50

answered Mar 5, 2019 at 4:30

Matt Way

33.3k10 gold badges85 silver badges86 bronze badges

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

6 Comments

claudiopb Over a year ago

But I want to do it in the cards, not in the players

Matt Way Over a year ago

You might need to clarify what you are trying to achieve then. Your json data is an array of what looks like characters. What do the cards represent? Could you provide say your ideal component tree output or something? Either way, what i've put as my answer should be what you need conceptually.

claudiopb Over a year ago

each card represent each character

Matt Way Over a year ago

ok updated. As you can see, the answer is still conceptually the same.

hamed hossani Over a year ago

please don't forget key=[i] for card child.

|

Adnan · Accepted Answer · 2019-03-05 06:54:25Z

1

Simply use .map() function to loop every item of an array.

.map()

  {data.map((item, i) => (     
    <Card key={i} name={item.name}/>  
  ))}

answered Mar 5, 2019 at 6:54

Adnan

1,70713 silver badges19 bronze badges

Collectives™ on Stack Overflow

ReactJs - creating a dynamic list

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related