Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – TextInput not editable using onChangeText

Im facing an issue where i am trying to create an editable text input within my app. A brief summary of what is happening – Data is passed through from the screen to the modal. The modal then sets the state with the relevant values.

However, when trying to edit the text, the characters always reverts back to the previous, original value. Please find the relevant parts of the code below. As per previous solutions i have included the onChangeText with the correct function which sets the new value, but no luck

Thanks in advance

const Step1 = ({title, setTitle, summary, setSummary, description, setDescription}) => {
    return (
        <ScrollView>
            <View style={styles.InputContainer}>
                <Text style={{ fontFamily: 'Gilroy-SemiBold', fontSize: 18, marginTop: 30 }}>Product Title</Text>
                <TextInput allowFontScaling={false}value={'title'} onChangeText={value => setTitle(value)} style={styles.singleInput} />
            </View>
            <View style={styles.InputContainer}>
                <Text style={{ fontFamily: 'Gilroy-SemiBold', fontSize: 18 }}>Product Summary</Text>
                <TextInput allowFontScaling={false} value={summary} multiline onChangeText={(value) => setSummary(value)} style={styles.multiLineInput} />
             </View>
             <View style={styles.InputContainer}>
                 <Text style={{ fontFamily: 'Gilroy-SemiBold', fontSize: 18 }}>Product Description</Text>
                 <TextInput allowFontScaling={false} value={description} multiline onChangeText={(value) => setDescription(value)} style={styles.multiLineInput} />
             </View>
        </ScrollView>
    )
}

    const [title, setTitle] = useState('') 
    const [summary, setSummary] = useState('')
    const [description, setDescription] = useState('')


    const populateData = async () => {
       await getProductById(productData).then((data) => {
        data.docs.forEach((prod) => {
            prodData = prod.data()
        })
       })
       setTitle(prodData.title)
       setSummary(prodData.summary)
       //console.log('function called')
    }

    useEffect(() => {
        checkPage()
        subscribe(productTags, () => {
            setTags(productTags);
        });
        subscribe(itemOptionsList, () => {
            setItemOptions(itemOptionsList.array)
        })
        populateData()
    },[page, validateStep1, tags, populateData])
Tags:

2

Answers


  1. 0

    Firstly, in the code you provided, <TextInput/>accepts a constant string value={'title'}, which is incorrect and should be used instead.
    Secondly, we must know where the operation will update the value. Obviously, any place with ‘setState’, such as setTitle or setDescription, may update the value.

    So what you need to do next is to comment out one of the places, then run it to confirm if it’s working properly. If it fails, comment another place and continue trying.

    This is a good method for beginners.

    Login or Signup to reply.
  2. 0

    So the value you are passing into the value attribute of your <TextInput> is a static string 'title'. But you are supposed to pass the title variable received from props.
    Because the string 'title' won’t change. String 'title' and variable title are not same. No matter what you type in the text box…It won’t change..
    This is what you have-

    <TextInput allowFontScaling={false}value={'title'} onChangeText={value => setTitle(value)} style={styles.singleInput} />

    Instead use this

    <TextInput allowFontScaling={false} value={title} onChangeText={value => setTitle(value)} style={styles.singleInput} />
    So the whole code is –

    const Step1 = ({title, setTitle, summary, setSummary, description, setDescription}) => {
    return (
        <ScrollView>
            <View style={styles.InputContainer}>
                <Text style={{ fontFamily: 'Gilroy-SemiBold', fontSize: 18, marginTop: 30 }}>Product Title</Text>
                <TextInput allowFontScaling={false} value={title} onChangeText={value => setTitle(value)} style={styles.singleInput} />
            </View>
            <View style={styles.InputContainer}>
                <Text style={{ fontFamily: 'Gilroy-SemiBold', fontSize: 18 }}>Product Summary</Text>
                <TextInput allowFontScaling={false} value={summary} multiline onChangeText={(value) => setSummary(value)} style={styles.multiLineInput} />
             </View>
             <View style={styles.InputContainer}>
                 <Text style={{ fontFamily: 'Gilroy-SemiBold', fontSize: 18 }}>Product Description</Text>
                 <TextInput allowFontScaling={false} value={description} multiline onChangeText={(value) => setDescription(value)} style={styles.multiLineInput} />
             </View>
        </ScrollView>
    )
}

    const [title, setTitle] = useState('') 
    const [summary, setSummary] = useState('')
    const [description, setDescription] = useState('')


    const populateData = async () => {
       await getProductById(productData).then((data) => {
        data.docs.forEach((prod) => {
            prodData = prod.data()
        })
       })
       setTitle(prodData.title)
       setSummary(prodData.summary)
       //console.log('function called')
    }

    useEffect(() => {
        checkPage()
        subscribe(productTags, () => {
            setTags(productTags);
        });
        subscribe(itemOptionsList, () => {
            setItemOptions(itemOptionsList.array)
        })
        populateData()
    },[page, validateStep1, tags, populateData])
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search