CODEWITHSUNDEEP
reactjsreact-native
Abdullah Ajmal
Abdullah Ajmal

Reputation: 483

Getting user input always returns “undefined"

I've got a few text fields and I'm trying to print whatever the user types to the console, here's the code:

export default function CreateOrderPage() {

    const [state, setState] = useState ({
        companyName: '',
        beginDate: ''
    })

    return (
        {/* Some code */}

        <TextInput style = {styles.inputText} 
            placeholder = {'Company name'}
            placeholderTextColor = {'#B2B2B2'}
            onChangeText = {text => setState(text)}
            value = {state.companyName}
        />

        <TextInput style = {styles.inputText} 
            placeholder = {'Order placed date'}
            placeholderTextColor = {'#B2B2B2'}
            onChangeText = {text => setState(text)}
            value = {state.beginDate}
        />

        <TouchableOpacity style = {styles.saveButton} onPress = {() => {
          console.log(state.companyName, state.beginDate);
        }}> 
            <Text style = {styles.saveButtonText}>Save</Text>
        </TouchableOpacity>
    )
}

For some reason, it always prints out "Undefined Undefined", I copied the exact same thing from a tutorial and changed it a little, and I even tried solutions given here in StackOverFlow, but nothing worked for me, I appreciate your feedback!

PS: I'm new to React Native, I apologise if I haven't used the right terminology.

Upvotes: 0

Views: 109

Answers (3)

Solijon Sharipov
Solijon Sharipov

Reputation: 179

You could update your state something like this or create a method to handle updates

1)

const handleUpdate = (keyProp) => (event) => {
  setState({
    ...state,
    [keyProp]: event.target.value,
  })
};

usage: onChangeText = {handleUpdate('companyName')}
usage: onChangeText = {handleUpdate('beginDate')}

export default function CreateOrderPage() {

    const [state, setState] = useState ({
        companyName: '',
        beginDate: ''
    })

    return (
        {/* Some code */}

        <TextInput style = {styles.inputText} 
            placeholder = {'Company name'}
            placeholderTextColor = {'#B2B2B2'}
            onChangeText = {text => setState({...state, companyName: text })}
            value = {state.companyName}
        />

        <TextInput style = {styles.inputText} 
            placeholder = {'Order placed date'}
            placeholderTextColor = {'#B2B2B2'}
            onChangeText = {text => setState({...state, beginDate: text })}
            value = {state.beginDate}
        />

        <TouchableOpacity style = {styles.saveButton} onPress = {() => {
          console.log(state.companyName, state.beginDate);
        }}> 
            <Text style = {styles.saveButtonText}>Save</Text>
        </TouchableOpacity>
    )
}

Upvotes: 1

نور
نور

Reputation: 1537

State look be like this

 const [name, setName] = useState ('')
    const [date, setDate] = useState ('')

function look be like this

 const   onChangeText = e => setName(e.target.value)

 const   onChangeDate = e => setDate(e.target.value)

input look be like this

<TextInput style = {styles.inputText} 
        onChange={onChangeText }
            value = {text}
        />
 <TextInput style = {styles.inputText} 
         onChange={onChangeDate }
            value = {date}
        />

Upvotes: 1

Ferin Patel
Ferin Patel

Reputation: 3998

setting the state to object should be done like this, accessing each key-value pair.

export default function CreateOrderPage() {

    const [state, setState] = useState ({
        companyName: '',
        beginDate: ''
    })

    return (
        {/* Some code */}

        <TextInput style = {styles.inputText} 
            placeholder = {'Company name'}
            placeholderTextColor = {'#B2B2B2'}
            onChangeText = {text => setState(prev => {
                                           companyName: text,
                                           beginDate: prev.beginDate
                                           })}
            value = {state.companyName}
        />

        <TextInput style = {styles.inputText} 
            placeholder = {'Order placed date'}
            placeholderTextColor = {'#B2B2B2'}
            onChangeText = {text => setState(prev => {
                                           companyName: prev.companyName,
                                           beginDate: text
                                           })}
            value = {state.beginDate}
        />

        <TouchableOpacity style = {styles.saveButton} onPress = {() => {
          console.log(state.companyName, state.beginDate);
        }}> 
            <Text style = {styles.saveButtonText}>Save</Text>
        </TouchableOpacity>
    )
}

Upvotes: -1

Related Questions