Hi Gavlooth, user experience wise, everything seems to be working the way they should be. And if the content can be populated when the user clicks edit, it will be even better. Right now, clicking edit opens up an empty box.
I concur. However there seems to be a problem (in function binding maybe ?) when they are not asigned/defined inside the render method, and when someone asigns properties inside an Array.map() lambda expression simultaneously. The chrome developer tools complains about these properties being undefined. I tried it with all these methods that I pass as properties. Maybe you can check and tell me what is going on? Try moving them outside render and asign them to properties inside the mapping.
Hi Gavlooth, if you are using ES6 syntax, you have to bind the functions inside the constructor function, an example would be like this:
class Recipe extends React.Component {
constructor(props) {
super(props);
this.state = {showMenu: "notShowContent"};
this.menuSwitch = this.menuSwitch.bind(this);
}
menuSwitch() {
if (this.state.showMenu == "notShowContent") {
this.setState({showMenu: "showContent"})
} else {
this.setState({showMenu: "notShowContent"})
}
}
render() {
return (
<div className="recipe">
<div
className="recipe-name"
onClick={this.menuSwitch}
>
{this.props.recipe.recipeName}
</div>
<div className={this.state.showMenu}>
<div
className="ingredient-container"
dangerouslySetInnerHTML={{__html: svgImage}}
/>
{this.props.recipe.ingridientList.map((x, index) => {
let key = ["ingridientClass", index];
return (<Ingredient ingredient={x} key={key}/>);
})}
<div className="rmbtn-cn">
<div
className="rmbtn"
onClick={this.props.EditRecipe}
>
Edit
</div>
<div
className="rmbtn"
onClick = {()=>{this.props.RemoveRecipe(this.props.index)}}
>
Delete
</div>
</div>
</div>
</div>
)
}
};