React Native: Possible UNhandled Promise Rejection: Can't find variable: name

Question

While trying to make an app that would ask for 3 dates, i've stumbled on a problem :

I have this:

onDateChange = (state) => (event, value) => {
    this.setState({
        [state]: name
    });
}

that is called by:

<DatePicker
    dateMes={this.state.dateMes}
    mode="date"
    placeholder="select date"
    format="DD-MM-YYYY"
    minDate="01-01-1950"
    maxDate="01-01-2050"
    androidMode="spinner"
    showIcon={false}
    onDateChange={this.onDateChange('dateMes')}
/>

When loaded, my 3 datepickers are juste filled with the placeholder. When i open them and select a date, nothing will change (as if i never selected a date)

I believe it's not finding how to make the onDateChange work, but I don't know how to make it work

Thanks for the help !

EDIT: Thanks to Chris G, i got a solution. My function now looks like

onDateChange = (state) => (event, name) => {
    this.setState({
        [state]: name
    });
}

The error disappeared, but the date are not changed with the datepicker.

In your parameters you have value but you're using name in your setState call. — user5734311
– user5734311, Commented Jul 12, 2017 at 8:24
Well that is indeed a rather dumb error. Although the error doesn't pops anymore, the dates still don't change :/. — General Baguettson
– General Baguettson, Commented Jul 12, 2017 at 8:44

Arnav Yagnik · Accepted Answer · 2017-07-12 09:21:29Z

1

Let me give this some perspective , OnDateChange prop receives a function which act as a callback you are assigning it fine , but when the callback is invoked reference of 'this' has changed and it couldnt find the variables which are bounded by the class

Now in react-native example they have used Arrow function , which lexically bound the scope of 'this' which explains why you could find the class variables because 'this' still refers to component. Reference : Arrow Functions

answered Jul 12, 2017 at 9:21

Arnav Yagnik

7921 gold badge4 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

General Baguettson Over a year ago

Well thanks for the explanation, it is indeed helping me understand how this works. I'm still new to react-native (and js), so I mostly have problems with the syntax. I will read the arrow function page when i have the time ! :)

Arnav Yagnik Over a year ago

sure , you can also use bind function . go through that also , till then to every callback use arrow functions. Cheers!

General Baguettson · Accepted Answer · 2017-07-12 09:16:04Z

0

I actually only had to go on the DatePicker official github. They have an example, where they do something like :

<DatePicker
    date={this.state.dateMes}  //it was dateMes=..., wich just meant nothing
    mode="date"
    placeholder="select date"
    format="DD-MM-YYYY"
    minDate="01-01-1950"
    maxDate="01-01-2050"
    androidMode="spinner"
    showIcon={false}
    onDateChange={(dateMes) => { this.setState({ dateMes: dateMes }); }}
/>

Without any function or whatever

And, well, it works. That's all :).

answered Jul 12, 2017 at 9:16

General Baguettson

1611 gold badge3 silver badges17 bronze badges

1 Comment

user5734311 Over a year ago

Just FYI, (dateMes) => { this.setState({ dateMes: dateMes }); } is an anonymous function.

amilab · Accepted Answer · 2019-02-02 03:30:36Z

0

When you have done setState you must clearly define it in the constructor.Try this

<DatePicker
date={this.state.dateMes}  //it was dateMes=..., wich just meant nothing
mode="date"
placeholder="select date"
format="DD-MM-YYYY"
minDate="01-01-1950"
maxDate="01-01-2050"
androidMode="spinner"
showIcon={false}
 onDateChange={(date) => {this.setState({date: date})}}/>

constructor(props) {
    super(props);
  this.state = {
                date:''

  };
}

answered Feb 2, 2019 at 3:30

amilab

8310 bronze badges

Collectives™ on Stack Overflow

React Native: Possible UNhandled Promise Rejection: Can't find variable: name

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related