Material-table with component as data not passing the component context in onChange event

Question

I tried to add component as data in material table but i'm not able to access 'this' context of the component to update state in the onChange function. The editable feature provided by the material-table does not fit my requirement.

class ClubList extends Component {
  state = { clubs: '', tableClubs: [] };

  changeDate=(change)=>{      
    console.log(this) //returns undefined.  I need to update state here but not able to access 'this' context of component
  }


  addClub = (event, clubs) => {
    let enteredClubs = this.state.clubs;
    let allClubs = this.props.clubs;
    let tableClubs = [];
    let enteredClubsArray = enteredClubs.split(/[ ,]+/);
    for (let clubs in enteredClubsArray) {
      tableClubs.push(allClubs.find(({ number }) => number == enteredClubsArray[clubs]));
    }
    tableClubs.map(
      (clubs) => (
        (clubs.scheduledDate = (        
          <DateComponent name="eventDate"
value={this.props.createData.eventDate} 
handleChange={this.changeDate} /> //Im calling the function here
        )),
        (clubs.city = clubs.city)
      )
    );
    this.setState({ clubs: '', tableClubs });
    this.clubsForCreate(tableClubs);
  };

  render() {
    return (
      <div className="clubSection">
            <TextComponent
              label="Enter Clubs"
              name="clubs"
              variant="outlined"
              handleChange={this.changeState}
              value={this.state.clubs}
            />
            <Fab color="primary" aria-label="add" onClick={this.addClub} className="clubAddButton">

        <MaterialTable
          title="Clubs"
          columns={[
            { title: 'Date', field: 'scheduledDate' },
            { title: 'Status', field: 'statusDesc' },

          ]}
          data={this.state.tableClubs}
        />
      </div>
    );
  }
}

check you are getting console.log(this.state) inside changeDate or not and let me know. — Prakash Karena, Nov 05 '19 at 08:30
Im getting undefined for 'this'. hence this.state throws me error — Vivek Ananda, Nov 05 '19 at 08:44
handleChange={(e) => this.changeDate()} try to call function like this — Prakash Karena, Nov 05 '19 at 08:49
tried that. It's just giving me the changed value but not the "this' context — Vivek Ananda, Nov 05 '19 at 10:01
make your project online on codepen So i can help you easily Brother. — Prakash Karena, Nov 05 '19 at 10:14

score 0 · Answer 1 · answered Nov 06 '19 at 06:38

0

Changing the function "changeDate" from arrow function to a normal function solved this issue. I guess the arrow function was removing the context of the callback function

answered Nov 06 '19 at 06:38

Vivek Ananda

7
4

Material-table with component as data not passing the component context in onChange event

1 Answers1