Adding obj to array onclick

Adding obj to array onclick
0

#1

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

#2

That is not a property in state.


#3

How would I handle that? in the article i found target.name would match the state, so I can see why it did not work. I also took out my edit because I know that works, and tried the save by itself. The input got cleared, but my new name did not show up. In my mind it would since its already mapping out name in the array


#4

in my console.log I can see that name was added with a value of “” because input at that point is empty. So then thats probably why its not showing, and the problem is with the inputs being linked?