CODEWITHSUNDEEP
javascriptreactjsreact-nativereact-hooks
Pedro
Pedro

Reputation: 1

Editable Text in React Native

I am new in react native and I need some help. I am trying to handle a TextInput where the user can update the text value whatever they want. For example, if the user creates a folder named "Bar" but later on the user decides to change the name for "Bar1". How can I do it???

Here is my code so far: where value={prosp.children} is the text value "Bar". onChangeText={(text) => handleText(text)}, here text is undefined for now but latter it will be my text update "Bar1" or whatever the user writes. 

import React, { useState } from "react";
import { View, TextInput} from "react-native";
import styles from "../globalStyles/Styles";

const FolderList = (props) => {
  const handleText = (value, text) => {};

  return (
    <View style={styles.homeRowFolder}>
      <View style={styles.iconAndText}>
        <TextInput
          value={props.children}
          onChangeText={(text) => handleText(text)}
          style={styles.textdisplay}
        ></TextInput>
      </View>
    </View>
  );
};

export default FolderList;

I want to use react hooks as well. Thank you so much for the help in advance. Appreciate.

Upvotes: 0

Views: 1155

Answers (1)

nipuna-g
nipuna-g

Reputation: 6652

In the event handler function, you are expecting two parameters. value and text 

  const handleText = (value, text) => {};

But only one is passed from the event handler. 

onChangeText={(text) => handleText(text)}

You need to change handleText so that it takes in only the passed in text and this should work. 

const handleText = (text) => { 
    console.log(text); // should print the updated text
};

You don't need to use hooks to handle this interaction. But if you are doing anything with the data such as saving it in a state you can use an appropriate hook for that.

Upvotes: 1

Related Questions