So, now im trying to add a new obj or what will be a new recipe, and my map is already mapping out the names so it should appear on the list. One problem is my inputs are linked together using the same handle change. I tried wrapping it in a form as using
this.setState({ [evt.target.name]: evt.target.value });
but that did not work. so my save method is handleAddsubmit
handleAddSubmit(){
const obj = {name : this.state.input};
const recipes = [...this.state.recipes]
recipes.push(obj);
this.setState({
recipes,
input: ""
})
}
and the full code
class RecipeBox extends React.Component {
constructor(props) {
super(props);
this.state = {
input: '',
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(event) {
this.setState({
input:event.target.value
});
}
//submit for EditList
handleSubmit() {
const recipes = [...this.state.recipes];
recipes[0].name = this.state.input;
this.setState({
recipes,
input: ""
});
}
handleAddSubmit(){
const obj = {'name' : this.state.input};
const recipes = [...this.state.recipes]
recipes.push(obj);
this.setState({
recipes,
input: ""
})
}
render(){
const ITEMS = this.state.recipes.map(({name}) => <li>{name}</li>)
return(
<div>
<ul>
{ITEMS}
</ul>
<EditList input = {this.state.input}
handleChange = {this.handleChange}
onSubmit = {this.handleSubmit}/>
<AddRecipe input = {this.state.input}
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="editList"
/>
<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'));