Question 33849 in React native Question posted in
The official React Native documentation can be found here.

React Native – Cannot read property 'value' of undefined on form handling

so I’m having my first experience with react native, and I’m creating an app that gathers user input and renders a collection of strings with the form parameters, but when I try to fill the input fields I keep having the same error:

Cannot read property 'value' of undefined

on form handling, how should I work around this? thanks for the attention.
here’s the code:

import {React, useState} from 'react';
import {
  TextInput,
  View,
  Text,
  SafeAreaView,
  StyleSheet,
  Button,
  ScrollView,
} from 'react-native';

const Home = () => {
  const [lines, setlines] = useState([
    {
      text: 'This is a default string',
      fontSize: 32,
      color: '#000000',
    },
  ]);
  const [line, setline] = useState({
    text: '',
    fontSize: '',
    color: '',
  });

  const handleSubmit = e => {
    setlines({...lines, line});
  };

  return (
    <View>
      <SafeAreaView>
        <Text style={styles.desc}>Insert your quote here:</Text>
        <TextInput
          style={styles.input}
          value={line?.text}
          onChangeText={e => setline({...line, [line?.text]: e.target.value})}
        />
        <Text style={styles.desc}>Insert choose font size:</Text>
        <TextInput
          keyboardType="numeric"
          style={styles.input}
          value={line?.fontSize}
          maxLength={3}
          onChangeText={e =>
            setline({...line, [line?.fontSize]: parseInt(e.target.value, 10)})
          }
        />
        <Text style={styles.desc}>Insert choose Hex color:</Text>
        <TextInput
          style={styles.input}
          value={`#${line?.color}`}
          maxLength={7}
          onChangeText={e => setline({...line, [line?.color]: e.target.value})}
        />
        <Button
          onPress={handleSubmit}
          title="Generate paragraph"
          color="#841584"
        />
      </SafeAreaView>
      <ScrollView>
        {lines.map((myLine, index) => (
          <Text
            key={index}
            // eslint-disable-next-line react-native/no-inline-styles
            style={{
              fontSize: myLine.fontSize,
              color: myLine.color,
              margin: 15,
            }}>
            {myLine.text}
          </Text>
        ))}
      </ScrollView>
    </View>
  );
};

const styles = StyleSheet.create({
  input: {
    height: 40,
    margin: 12,
    borderWidth: 1,
    padding: 10,
  },
  desc: {
    height: 40,
    margin: 'auto',
    padding: 10,
  },
});

export default Home;

Tried to handle the inputs inline, but didn’t solve the problem

Tags:

2

Answers


  1. 0

    I’ve corrected your code in a few places. Here is a snack

    import {React, useState} from 'react';
import {
  TextInput,
  View,
  Text,
  SafeAreaView,
  StyleSheet,
  Button,
  ScrollView,
} from 'react-native';

const Home = () => {
  const [lines, setlines] = useState([
    {
      text: 'This is a default string',
      fontSize: 32,
      color: '#000000',
    },
  ]);
  const [line, setline] = useState({
    text: '',
    fontSize: '',
    color: '',
  });

  const handleSubmit = e => {
    setlines([...lines, line]);
  };

  return (
    <View>
      <SafeAreaView>
        <Text style={styles.desc}>Insert your quote here:</Text>
        <TextInput
          style={styles.input}
          value={line.text}
          onChangeText={text => setline({...line, text })}
        />
        <Text style={styles.desc}>Insert choose font size:</Text>
        <TextInput
          keyboardType="numeric"
          style={styles.input}
          value={line.fontSize}
          maxLength={3}
          onChangeText={fontSizeStr =>
            setline({...line, fontSize: parseInt(fontSizeStr, 10)})
          }
        />
        <Text style={styles.desc}>Insert choose Hex color:</Text>
        <TextInput
          style={styles.input}
          value={line.color}
          maxLength={7}
          onChangeText={color => setline({...line, color })}
        />
        <Button
          onPress={handleSubmit}
          title="Generate paragraph"
          color="#841584"
        />
      </SafeAreaView>
      <ScrollView>
        {lines.map((myLine, index) => (
          <Text
            key={index}
            // eslint-disable-next-line react-native/no-inline-styles
            style={{
              fontSize: myLine.fontSize,
              color: '#' + myLine.color,
              margin: 15,
            }}>
            {myLine.text}
          </Text>
        ))}
      </ScrollView>
    </View>
  );
};

const styles = StyleSheet.create({
  input: {
    height: 40,
    margin: 12,
    borderWidth: 1,
    padding: 10,
  },
  desc: {
    height: 40,
    margin: 'auto',
    padding: 10,
  },
});

export default Home;
    Login or Signup to reply.
  2. 0

    As per documentation TextInput onChangeText calls the callback functions with the text which is entered inside the TextInput.

    e.target is not a valid property,

    I think you have some ReactJs background, due to which you are making this mistake.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search