This is my array of objects:
this.state = {
recipes: [
{
name: "test123",
products: ["313", "dasd", "dasfg"]
},
{
name: "test",
products: ["product", "product 2", "product 2", "product 3"]
}
]
This is how I render the products:
let id = this.props.currentRecipe; // the Id is just to select the object that I want to render
let recipes = this.props.recipes[id];
{recipes.products.map((product, id) => {
return (
<FormControl
key={product + '_' + id}
type="text"
value={product}
onChange={this.editProduct.bind(this, id)}
placeholder={"Product " + (id + 1)}
/>
);
})}
This is my child function where I call my parent function:
editProduct(i, event) {
this.props.handleEditProduct(i, event);
}
What my parent function should look like?
handleEditProduct(i, event) {
.... ?
}