Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6214

getting Property 'value' does not exist on type 'number'.ts(2339) on onChange function of react native text input

$
0
0

Hey im relatively new to typescript. Its telling me there's no value property on the e.target attribute of my onChange function. Im just trying to have it update the state of the userObj, allow me to save that data, and then let me view that data in another component.

import React, { useState } from 'react';import {    View,    Image,    Text,    TextInput,    StyleSheet,    SafeAreaView,    KeyboardAvoidingView,  } from 'react-native';import { TouchableOpacity, ScrollView } from 'react-native-gesture-handler';import profile from '../assets/IMG_7767.psd'import UserStore from '../store/UserStore'interface Props {}  const Profile: React.FC<Props> = () =>  {    const { user } = UserStore     const [firstName, setFirstName] = useState(user[0].firstName)    const [lastName, setLastName] = useState(user[0].lastName)    const [location, setLocation] = useState(user[0].location)    const [description, setDescription] = useState(user[0].description)    const userObj = {      firstName: firstName,      lastName: lastName,      location: location,      description: description    }    return (<SafeAreaView style={styles.blue}><KeyboardAvoidingView><ScrollView><View style={styles.center}><View style={styles.head}><Text style={styles.headText}>Profile Details</Text></View><View style={styles.shadow}><Image source={profile} style={styles.profileImage}/></View><View style={styles.formField}><Text style={styles.formText}>First Name</Text><TextInput                   style={styles.textInput}                   value={firstName}                   onChange={(e) => setFirstName(e.currentTarget)}                  /></View><View style={styles.formField}><Text style={styles.formText}>Last Name</Text><TextInput                   style={styles.textInput}                  value={lastName}                   onChange={(e) => setLastName(e.target.value)}                  /></View><View style={styles.formField}><Text style={styles.formText}>Location</Text><TextInput                   style={styles.textInput}                  value={location}                   onChange={(e) => setLocation(e.target.value)}                  /></View><View style={styles.formField}><Text style={styles.formText}>Description</Text><TextInput                   style={styles.textArea}                  value={description}                   onChange={(e) => setDescription(e.target.value)}                  /></View><TouchableOpacity style={styles.mainButton} onPress={()=> user[0].update(userObj)}><Text style={styles.mainButtonText}>Save</Text></TouchableOpacity></View></ScrollView></KeyboardAvoidingView></SafeAreaView>    )}

I looked at other posts on stack overflow and couldn't find any related to this specific issue. Other solutions i found online said to use getElementById().value but i figured there would be an easier way pithing react-native. I also saw a solution that said e.currentTarget instead of e.target Im assuming that would have the same result as Im currently having because its ties to an onChange attribute and only one text input is changing at a time. The second solution did not work for me either


Viewing all articles
Browse latest Browse all 6214

Trending Articles