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

admin管理员组

文章数量:1023230

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 ponent. 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)} />

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 ponent. 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)} />

• javascript
• arrays
• reactjs
• this

Share Improve this question Follow asked Jul 27, 2018 at 11:29 ugotchiugotchi 1,01311 gold badge1616 silver badges3434 bronze badges 4

• 2 Can you show the rest of the code for the ponent? – Chris Commented Jul 27, 2018 at 11:32
• What do you mean by 'this.props is an array'? And you need to provide some more code. – AkshayM Commented Jul 27, 2018 at 11:32
• this.props should be an object containing properties, so maybe this.props.myArray can contain an array – Jayffe Commented Jul 27, 2018 at 11:36
• can you give some test case? – Shubham Agarwal Bhewanewala Commented Jul 27, 2018 at 11:58

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

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 ponent

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

You can provide the required data to individual child ponents 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 ponent, 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
}

this.props would refer to the Table ponent's properties- but if you mean you are passing in the array to the Table ponent, 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>
      )
    }

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 ponent. 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)} />

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 ponent. 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)} />

• javascript
• arrays
• reactjs
• this

Share Improve this question Follow asked Jul 27, 2018 at 11:29 ugotchiugotchi 1,01311 gold badge1616 silver badges3434 bronze badges 4

• 2 Can you show the rest of the code for the ponent? – Chris Commented Jul 27, 2018 at 11:32
• What do you mean by 'this.props is an array'? And you need to provide some more code. – AkshayM Commented Jul 27, 2018 at 11:32
• this.props should be an object containing properties, so maybe this.props.myArray can contain an array – Jayffe Commented Jul 27, 2018 at 11:36
• can you give some test case? – Shubham Agarwal Bhewanewala Commented Jul 27, 2018 at 11:58

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

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 ponent

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

You can provide the required data to individual child ponents 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 ponent, 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
}

this.props would refer to the Table ponent's properties- but if you mean you are passing in the array to the Table ponent, 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>
      )
    }

本文标签： javascriptReactjs how to pass in index as prop to child component from thisprops arrayStack Overflow