Proper way to prefill form fields in React

11

I think the issues is due to where you’re rendering the Modal, I can’t pin down the exact problem but I can see that if you render the model outside the <li> the flickering disappears.

Try this out:

// render method of RecipeList
{this.props.recipes.map((r,i) => {
	return <React.Fragment key={i}>
		<Recipe
			recipe={r} 
			num={i} 
			deleteRecipe={this.props.deleteRecipe}
			handleChange={this.props.handleChange}/>
		<Modal
			title="Edit recipe"
			dataTarget={r.name + "Modal"}
			dataTargetID={"#" + r.name + "Modal"}
			handleChange={this.props.handleChange}
			recipeName={r.name}
			recipeIngredients={r.ingredients}
			{this.props.handleSubmit}
		/>
	</React.Fragment>
})}

Then remove the Modal from the Recipe class.

I should say, the resulting html isn’t good practice as you have div’s that are direct children of a <ul>. You could re-write it to render only one edit Modal at the same level as the addModal, then pass down a function that changes the state of the App class that the modal can use and renders it with the correct values.