React. Managing state with onClick function using index

Question

Okay, So I am still fairly new to coding. I am trying to manage the state of my calculator using an onClick function. I have a list of ingredients in my database. I have it set up so I can pull all of them from the db and its listed on my component. I am trying to set it so when i click on the individual name it will change the properties listed below. I feel like im on the right track but cant seem to figure it out.

    import React, { Component } from 'react';
    import $ from 'jquery';
    import '../index.css';

    class StepFive extends Component{
      constructor(props) {
        super(props)
        this.state = {
            ingredients: false,
        counter: 0
      }
     }

      componentDidMount() {
          var self = this;
           $.ajax({
            method: 'GET',
            url: 'http://localhost:3002/api/ingredients',
      })
      .done(function(ingredients){
            self.setState({ingredients: ingredients})
      })
    }

    handleChange(e){
      this.setState({counter: e.target.value})
    }


    listAll(){
      return (
        <div>
          <div className="vertical-menu">
          {this.state.ingredients.map(function(ingredients, i){
            console.log(i)
            return <div>
              <span><a key={i} href="#" onClick={this.handleChange(i)}>{ingredients.name}</a> <a href='#'>+</a></span>
            </div>
          })}
        </div>
      </div>)
    }

    render() {
      console.log(this.state, 'in render')
      if(this.state.ingredients === false){
        return(<div><span>loading</span></div>)
      } else {
          return(
            <div className='stepFiveBox'>
              {this.listAll()}
              <ul>
                <li>Hardness=
                  {this.state.ingredients[this.state.counter].hardness}</li>
            <li>Cleansing={this.state.ingredients[this.state.counter].cleansing}</li>
            <li>Condidtion={this.state.ingredients[this.state.counter].condition1}</li>
            <li>Bubbly={this.state.ingredients[this.state.counter].bubbly}</li>
            <li>Creamy={this.state.ingredients[this.state.counter].creamy}</li>
            <li>Iodine={this.state.ingredients[this.state.counter].iodine}</li>
            <li>INS={this.state.ingredients[this.state.counter].ins}</li>
            <li>Lauric={this.state.ingredients[this.state.counter].lauric}</li>
            <li>Myristic={this.state.ingredients[this.state.counter].myristic}</li>
            <li>Palmitic={this.state.ingredients[this.state.counter].palmitic}</li>
            <li>Stearic={this.state.ingredients[this.state.counter].stearic}</li>
            <li>Ricinoleic={this.state.ingredients[this.state.counter].rincinoleic}</li>
            <li>Oleic={this.state.ingredients[this.state.counter].oleic}</li>
            <li>Linoleic={this.state.ingredients[this.state.counter].linoleic}</li>
            <li>Linolenic={this.state.ingredients[this.state.counter].linolenic}</li>
            <li>NaOH SAP={this.state.ingredients[this.state.counter].sap}</li>
          </ul>
        </div>
      )
    }
      console.log(this.listAll(),)}
  }
  export default StepFive

Possible duplicate of [React: What is this arrow function doing in the props for Tic-Tac-Toe game?](https://stackoverflow.com/questions/41688366/react-what-is-this-arrow-function-doing-in-the-props-for-tic-tac-toe-game) — Shubham Khatri, Jul 26 '17 at 19:18
when I change this the website renders, but when i click the ingredient. i am getting error can not read property handleChange of undefined... so i believe the issue is with my handleChange function? — Nick Lange, Jul 26 '17 at 22:22

score 0 · Answer 1 · answered Jul 26 '17 at 19:14

A problem is in your onClick handler. You're doing  Which is invoking handleChange at render time.

In order to invoke the function on click, you just pass the function without calling it. 

In order to pass specific arguments to the function, you have two options:  this.handleChange(i)}> or: 

Here's an example using the .bind syntax: https://codesandbox.io/s/Z461QVox8

when I change this the website renders, but when i click the ingredient. i am getting error can not read property handleChange of undefined — Nick Lange, Jul 26 '17 at 21:36

score 0 · Answer 2 · answered Jul 27 '17 at 07:08

0

can you try to replace this one :

handleChange(e){
   this.setState({counter: e.target.value})
}

to this one :

handleChange = (e) => {
   this.setState({counter: e.target.value})
}

and replace this one too :

<a key={i} href="#" onClick={this.handleChange(i)}>

to this one :

<a key={i} href="#" onClick={() => this.handleChange(i)}>

Hope can help you :)

answered Jul 27 '17 at 07:08

Rizal Sidik

979
6
17

im still getting the same error. can not read property 'handleChange' of undefined – Nick Lange Jul 28 '17 at 14:26

score 0 · Answer 3 · answered Jul 28 '17 at 17:29

it was this issues.

in the listAll function i added a

var self = this;

then switched all this to self. was getting error value undefined... so i realized i didnt need e.target.value i jsut needed e. changed handelChange function to

handleChange = (e) => { this.setState({counter: e}); }

badabingbadaboom

React. Managing state with onClick function using index

3 Answers3