Trying to get a function working in the Parent component and pass it down as a prop.
I’m getting more and more confused.
I thought you could define functions like componentWillMount() or render() but these seem to have no access to my state so I put a function inside render.
Now that function (update) can’t read the state so I’m lost.
(maybe there is no state yet?)
EDITED:
This is the code that is invalid. Can anyone advise as to how to use the update function?
class App extends React.Component {
constructor() {
super();
this.state = {
recipes: recipeData
}
}
// note recipe data is an array of objects
update(newText, id) {
console.log(newText);
if (this.state) {
var recipes = this.state.recipes.map(
r => (r.id !== id) ?
recipes: { ...recipes,
recipes: newText }
)
this.setState({recipes : recipes})
}
}
render() {
return (<div className="container">
<h1 className="text-center">Online Recipe Book</h1>
<div className="recipe-container">
{this.state.recipes.map(function(r,i) {
return <Recipe
onChange={this.update()}
key={i}
id={r.id}
name={r.name}
servings={r.servings}
ingredients={r.ingredients}
instructions={r.instructions}
/>
})}
</div>
</div>
)
}
}