I am getting this warning:
The state/prop "multipleInputs" changed during "componentDidLoad()", this triggers extra re-renders, try to setup on "componentWillLoad()"
Element
This is the component in question recipe-item
<Host>
<ion-item>
<ion-label>
<h2>{capitalizeAllFirstLetters(this.name)}</h2>
<h3>
<slot name="category"></slot>
</h3>
<h3>{this.calories} calories</h3>
<slot></slot>
<slot></slot>
</ion-label>
</ion-item>
</Host>
I am using the component this way.
<recipe-item
name={recipe.name}
calories={recipe.calories}
image={recipe.image}
>
<div slot="category" class="ion-text-capitalize">
Category: {recipe.category}
</div>
<ion-button
fill="outline"
onClick={() => this.addDailyMeal(recipe)}
>
<ion-icon slot="icon-only" name="add"></ion-icon>
</ion-button>
<ion-button
fill="outline"
onClick={() => goToRecipeInfo(recipe.name)}
>
<ion-icon
slot="icon-only"
name="information-outline"
></ion-icon>
</ion-button>
</recipe-item>
I know this is the component in question because when I to delete a button I don’t get the warning anymore.
I am getting the data from componentWillLoad()
so I am not sure what I am doing wrong here.