CODEWITHSUNDEEP
reactjseventsdatepickeronchange
Makko
Makko

Reputation: 3

ReactJS Cannot read property 'handleChange' of undefined with material ui

I am trying to build with ReactJS a search bar dynamically based on props value, but I get the following error 'Cannot read property 'handleChange' of undefined' . I don't see what I am doing wrong, I just want to display two DatePicker.

Here is my code:

app.js

import React, { Component } from 'react';
import { render } from 'react-dom';
import SearchBar from '../searchBar/searchBar';

export default class Hello extends Component {

  render() {

    const today = Moment(new Date ()).format('YYYYMMDD');

    const fields_newSec = [ {"type":"dateField", "name":"from", "value":today, "label":"From Date"},
                            {"type":"dateField", "name":"to", "value":today, "label":"To Date"} ];

    return (
          <div>
           <SearchBar searchBarFields={fields_newSec} />
          </div>
    );
  }
}
render(<Hello />, document.getElementById('app'));

searchBar.js

import React from 'react';
import DatePicker from 'material-ui/TextField';
import Moment from 'moment';

class SearchBar extends React.Component {

  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(event) {
    console.log("Event: "+event.target.value);
    console.log("Text Name: "+event.target.name);
  }

  render() {

    var itemsList = this.props.searchBarFields.map(function(element, index) {
        return (
          <DatePicker
                key={index}
                label={element.label}
                type="date"
                name={element.name}
                defaultValue={Moment(new Date()).format('YYYY-MM-DD')}
                onChange={this.handleChange}
                InputLabelProps={{
                  shrink: true,
                }}                
            />
        );
    });

    return(
        <div>{itemsList}</div>
    );     
  }
}
export default SearchBar;

Upvotes: 0

Views: 2389

Answers (1)

egorchik
egorchik

Reputation: 549

I think you need use arrow function for map

render() {

return (

<div>
{this.props.searchBarFields.map((element, index) => (

              <DatePicker
                    key={index}
                    label={element.label}
                    type="date"
                    name={element.name}
                    defaultValue={Moment(new Date()).format('YYYY-MM-DD')}
                    onChange={this.handleChange}
                    InputLabelProps={{
                      shrink: true,
                    }}                
                />
       ))}
</div>

)

}

Upvotes: 1

Related Questions