CODEWITHSUNDEEP
javascriptarraysreactjsthis
ugotchi
ugotchi

Reputation: 1013

React.js how to pass in index as prop to child component from this.props array

New to React, so apologise in advance if my terminology is way off target. I have a table that has a list of people in specific order. I need to be able to create a this.props.tablePosition value based on the index on the person in question.

this.props is an array in the Table component. I have the code below thats not working as I'm not exactly sure how to get the index.

<RankingCards {...this.props} tablePosition={this.props.indexOf(this)} />

Upvotes: 6

Views: 8136

Answers (2)

abhishake
abhishake

Reputation: 771

Need to view rest of the code, but as per my understanding, you need this kind of flow, but correct me if I am wrong ;)

If you are getting the props like this, in the parent component

{
    tableData: [
        {name: "John", index: 1},
        {name: "David", index: 2},
        {name: "Ardhya", index: 3}
    ]
}

You can provide the required data to individual child components like this.

this.props.tableData.map(function(data){
    // do whatever processing you want to perform
    return(
        <RankingCards rawProp={data} tablePosition={data.index} key={data.index} />
    )
})

Inside your RankingCards component, you'll get the props other than key.

Eg. for first entity, if you print props with console.log(this.props), you'll get the values in this way.

{
    rawProp: {name: "John", index: 1},
    tablePosition: 1
}

Upvotes: 2

shottysteve
shottysteve

Reputation: 1

this.props would refer to the Table component's properties- but if you mean you are passing in the array to the Table component, eg. <Table personList={["John","Jeff","Joe"]} />, then you can just use a for loop in your Table's render function:

    render() {
      var rankingCards = []
      var personList = this.props.personList
      for (var i = 0; i < personList.length; i++) {
        rankingCards.push(<RankingCard {...personList[i].props} tablePosition={i} />)
      }
      return(
        <RankingCardContainer>
          {rankingCards}
        </RankingCardContainer>
      )
    }

Upvotes: -1

Related Questions