component not updating - issue with how to use key - reactjs

Question

I have a card component that is used across the site. The card doesn't fully update when the data is updated, or if it changes to another card, it will sometimes retain information in the card, from the previous one. The information that isn't changing all the time, are the areas where it's being rendered from a function this.renderPrice(), this.renderPerks(), and this.renderButtons(). I've tried adding a key to the actual component, and when the component is being called from another component, but neither seem to solve the issue.
class ChooseMembershipCard extends React.Component {
return(
<div className="membership_card" key={this.props.product.id}>
<h6 className="membership_banner">{this.renderSpotsAvailable()}</h6>
<h6 className="membership_title">{this.props.product.title}</h6>
{this.renderPrice()}
<p className="membership_description">{this.props.product.description}</p>
{this.renderPerks()}
<div style={{padding: 10, marginTop: 20}}>
{this.renderButtons()}
</div>
</div>
)
export default ChooseMembershipCard
I am using in this component, where I've tried adding the key to the component, but it doesn't seem to make a difference
return (
<ChooseMembershipCard
key={this.state.products[this.state.selectedProductIndex]}
product={this.state.products[this.state.selectedProductIndex]}
isUser={this.state.isUser}
selectedProductIndex={this.state.selectedProductIndex}
monthlyFrequency={this.state.monthlyFrequency}
userHasSubscription={this.userHasSubscription}
loadUser={this.props.loadUser}
/>
)
And then I map through products here, and render a card for each one. When I update information inline, the data saves and is updated, but the actual component doesn't re-render, so the updated information is not seen unless the page is refreshed.
renderProducts() {
return this.state.products.map((product, i) => {
return (
<ChooseMembershipCard
key={product.id}
product={product}
isUser={true}
isEditable={true}
archiveProduct={this.archiveProduct}
editProduct={this.editProduct}
/>
)
})
}
In the above example, I always get 1 error:
ChooseMembershipCard: "key" is not a prop. Trying to access it will result in "undefined" being returned. If you need to access the same value within the child component, you should pass it as a different prop.
But if I remove the key, I then get this error:
Each child in a list should have a unique "key" prop.
I feel like the issue is how key is being used. Any insight is appreciated!

Answer 1

You are passing key into ChooseMembershipCard Component. Why dont you use the same key props while assigning into that div.
class ChooseMembershipCard extends React.Component {
return(
<div className="membership_card" key={this.props.key}>
<h6 className="membership_banner">{this.renderSpotsAvailable()}</h6>
<h6 className="membership_title">{this.props.product.title}</h6>
{this.renderPrice()}
<p className="membership_description">{this.props.product.description}</p>
{this.renderPerks()}
<div style={{padding: 10, marginTop: 20}}>
{this.renderButtons()}
</div>
</div>
)
export default ChooseMembershipCard
You need to add key to the component which is being rendered multiple times. In renderProducts() map function you are adding key prop but ur not actually assigning it into ChooseMembershipCard Component instead passing a prop named key to that Component and your not using it anywhere in your code.