react-native textInput value return [object Object]

Question

I've got a component with 4 TextInput representing business hours I want to concatenate the first 2 (representing opening time) and store them in my state. But I have a return value of type : [object Object]:[object Object]

this is the first two input:

                 <CustomInput
                  underlineColorAndroid="#58CAF1"
                  style={styles.inputScheduleTime}
                  // ref="lundiStart"
                  placeholder="8H00..."
                  keyboardType="numeric"
                  onBlur={ input => {
                      let input1 = input;
                      this.setState({ monday: {
                        start: input1 ,
                        end: ""
                        }
                      });
                  }
                }
                />
                <CustomInput
                  underlineColorAndroid="#58CAF1"
                  style={styles.inputScheduleTime}
                  // ref="lundiStart"
                  placeholder="8H00..."
                  keyboardType="numeric"
                  onBlur={ input => {
                    let input2 = input;
                      this.setState({ monday: {
                        start:this.state.monday.start + ':' + input2,
                        end: ""
                        }
                      });
                  }
                }
                />  

And my state is like that:

  monday: {
        start: "",
        end: ""
      },  

has your opinion on why? how to store them properly?

=================== SOLUTION ==================

With onBlur like in my situation and with react-native , you can access to the value with : input.nativeEvent.text

With this I was able to set my state cleanly !!

Answer 1

Set the value of input1 and input2 to input.target.value .

You're getting event back (which is an object, not a string) and trying to concatenate that together, thereby resulting in [object Object]:[object Object] .

Getting the event's target value (which is the input field), should give you what you require.

Answer 2

Take a look at this example .
The most common way to reflect input-values in React is to update the state on every single change, so it has a reliable value in it.

If you really want to use onBlur:
Are you sure, your onBlur-Callback returns a string? Check the Value, returned in input and make sure the type is right.

Answer 3

This is old thread but encountered similar issue and solved it using the following

Update

onBlur={text => SetContent(text)}

To

onBlur={({ text }) => SetContent(text)}

Note: Wrapped text in Parenthesis and curly brackets