So, I dont think I have done this before in javascript. I have the two recipe names taco and pizza already showing in a list. If I click on say pizza then I want to display pizza’s name, ingredients, directions etc. If I click on tacos then the taco info should show up. Which I guess I should put eventlisteners on those li’s so I know they are clicked? This is more just learning and messing around before I attempt the actual project. im assuming I need the index of the array and compare that?
heres the code ive been messing with
class RecipeBox extends React.Component {
constructor(props) {
super(props);
this.state = {
editRecipe: '',
addRecipe: '',
recipes :
[{
name: "Tacos",
directions: "make tacos",
ingredients: ["meat"]
},
{
name: "pizza",
directions: "bake",
ingredients: ["dough"]
}]
};
this.handleAddSubmit = this.handleAddSubmit(this);
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}///
handleChange (evt) {
this.setState({ [evt.target.name]: evt.target.value }.split(" "));
}
//submit for EditList
handleSubmit() {
const recipes = [...this.state.recipes];
recipes[0].name = this.state.editRecipe;
this.setState({
recipes,
editRecipe: ""
});
}
handleAddSubmit(){
const obj = {'name' : this.state.addRecipe};
const recipes = [...this.state.recipes]
recipes.push(obj);
this.setState({
recipes,
addRecipe: ""
})
console.log(recipes);
}
render(){
const ITEMS = this.state.recipes.map(({name}) => <li>{name}</li>)
return(
<div>
<ul>
{ITEMS}
</ul>
<EditList input = {this.state.editRecipe}
handleChange = {this.handleChange}
onSubmit = {this.handleSubmit}/>
<AddRecipe input = {this.state.addRecipe}
handleChange = {this.handleChange}
onAddSubmit = {this.handleAddSubmit} />
</div>
)
}
}
class EditList extends React.Component {
constructor(props) {
super(props);
}
render() {
return(
<div>
<input type='text'
value = {this.props.input}
onChange = {this.props.handleChange}
name="editRecipe"
/>
<button onClick={this.props.onSubmit}>Edit</button>
</div>
)
}
}
class AddRecipe extends React.Component {
constructor(props) {
super(props);
}
render() {
return(
<div>
<input type='text'
value = {this.props.input}
onChange = {this.props.handleChange}
name="addRecipe"
/>
<button onClick={this.props.onAddSubmit}>Save</button>
</div>
)
}
}
ReactDOM.render(<RecipeBox />, document.getElementById('app'));