Updating state from child component onclick

JavaScript
1

So, I am just trying to get the skeleton working…well idea of the skeleton for the app I want to re try. Now I am trying to update the state from the child component…I think I passed in the state as props correctly, but to be honest im not sure about the actual updating part. the handle change method will capture the input, and then im assuming the submit will set the state name to the input. Essentially it will be where the user can edit the recipe not just the name…but baby steps. of course I only wanted one name to change, but wasnt quite sure in the onsubmit method. Will take any help here

class RecipeBox extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      input:'',
     recipeList :
      [{
        recipe: "Tacos",
        directions: "make tacos",
        ingredients: ["meat"]
      },
      {
        recipe: "pizza",
        directions: "bake",
        ingredients: ["dough"]
      }]
    };
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }///
  
  handleChange(event) {
    this.setState({
      input: event.target.value
    });
   }
  
  handleSubmit(e){
    e.prevent.Default
    setState({
      recipe: input
    })
  }
  
  render(){
    const {input} = this.state;
    const ITEMS = this.state.recipeList.map(({directions}) => <li>{directions}</li>)
    return(
      <div>
        <EditList input = {this.state.input}
          handleChange = {this.handleChange}
          onSubmit = {this.handleSubmit}/>
          <ul>                                                     
          {ITEMS}
          </ul>
        </div>
    )
  }
}

class EditList extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return(
      <div>
        <input type='text'
          value ={this.props.input}
          onchange = {this.props.handleChange}
         />
        <button onClick={this.props.onSubmit}>Submit</button>
       </div>
     )
  }
}

ReactDOM.render(<RecipeBox />, document.getElementById('app'));
2

Check this out. It will help you.

3

Appreciate. I stepped out to take a break, but will look st it when I get back!!

5

Input I actually made in state…now that I think about it I’m not sure why…

I know the handle change would capture whatever the user entered, so here after they hit submit I wanted that input to replace the name of the recipe. Though selecting one I wasn’t sure about.

The end goal is to have a user select a recipe and be able to edit that specific recipe, so I will have to find out to make sure it’s that’s specific recipe state being edited. But obviously that’s a long shot from now

6

Made some changes…still wrong I know that, but maybe closer? Right now like I said basically I just want to change one recipe name in the list when the user enters and hits the button. I grabbed the two methods from the parent component, and the recipe state I think. Not sure if I need that to update the state, or will the methods take care of it? Of course it does not like mt handle and submit methods the way they are now

class RecipeBox extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      
     recipeList :
      [{
        recipe: "Tacos",
        directions: "make tacos",
        ingredients: ["meat"]
      },
      {
        recipe: "pizza",
        directions: "bake",
        ingredients: ["dough"]
      }]
    };
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }///
  
  handleChange(event) {
    this.setState({
     recipeList[0].recipe :event.target.value
    });
   }
  
  handleSubmit(){
      const newRecipe = this.state.recipelist[0].recipe
    setState({
      recipeList[0].recipe: newRecipe
      
    })
  }
  
  render(){
   const input = '';
    const ITEMS = this.state.recipeList.map(({recipe}) => <li>{recipe}</li>)
    return(
      <div>
        <EditList recipe = {this.state.recipeList[0].recipe}
          handleChange = {this.handleChange}
          onSubmit = {this.handleSubmit}/>
          <ul>                                                     
          {ITEMS}
          </ul>
        </div>
    )
  }
}

class EditList extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
     
    return(
      <div>
        <input type='text'
          value = {input}
          onChange = {this.props.handleChange}
         />
        <button onClick={this.props.onSubmit}>Submit</button>
       </div>
     )
  }
}

ReactDOM.render(<RecipeBox />, document.getElementById('app'));
8

A question if I may.

the creating of the copy or shallow array in handle submit is because of mutating right? Or rather not mutating the original array? So if I want to update or make any changes to an array I must always do that on the copy