CODEWITHSUNDEEP
reactjsreact-nativereact-hooks
Neel Patanwadia
Neel Patanwadia

Reputation: 11

custom component is not focusing on next textinput onSubmitEditting

I have used react hooks. When I press next button I get error like undefined is not an object (Evaluating nextRef.focus).

 const renderRow = (value, onUpdate, currentRef, nextRef) => {
    return (
          <View style={VALUE_CONTAINER}>
            <TextField
              autoCorrect={false}
              onChangeText={(text) => onUpdate(text)}
              autoCapitalize={"none"}
              returnKeyType={'next'}
              onSubmitEditing={() => { nextRef.current.focus() }}
              forwardedRef={(input) => { currentRef = input }}
              value={value} />
          </View>
    )
  }

I call this component from main view by this below lines 

        {renderRow(mobile, updateMobile, mobileRef, cityRef)}
        {renderRow( city, updateCity, cityRef, mobileRef)}

Upvotes: 1

Views: 133

Answers (1)

Shubham Khatri
Shubham Khatri

Reputation: 281686

Instead of assigning ref to currentRef.current you have assigned it to currentRef which is why it would cause a problem

const renderRow = (value, onUpdate, currentRef, nextRef) => {
    return (
          <View style={VALUE_CONTAINER}>
            <TextField
              autoCorrect={false}
              onChangeText={(text) => onUpdate(text)}
              autoCapitalize={"none"}
              returnKeyType={'next'}
              onSubmitEditing={() => { nextRef.current.focus() }}
              forwardedRef={(input) => { currentRef.current = input }}
              value={value} />
          </View>
    )
  }

Upvotes: 1

Related Questions