Forbes magazine logo Ranked Best Coding Bootcamps 2023

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


Trusted by

Students and instructors from world-class organizations

Imperial College London
Carnegie Mellon University
City University of Hong Kong
Hack Reactor
Cisco Meraki
University of Oxford
Swift
Bazaarvoice
Waterloo
Uber
AtlanTech
Tumblr
Boston College
Bombardier Aerospace
University of St. Andrews
New York University
Minerva Schools at KGI
Merrill Lynch
Riot Games
JP Morgan
Morgan Stanley
Advanced Placement®
Google
KPMG
The University of Hong Kong
University of Toronto
SCMP
Moat
Zynga
Hello Toby
Deloitte
Goldman Sachs
Yahoo
HSBC
General Assembly
Tesla
McGill University
Microsoft

Join the upcoming Cohort #87

Enroll for March 4th, 2024