Free code camp React recipe editor

Altcademy Team wrote on 7 February 2018

Any reviews/comments for my code here: https://codepen.io/gavlooth/pen/JKwyQQ

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>
        )
    }
};

React documentation stated this here https://facebook.github.io/react/docs/reusable-components.html#no-autobinding