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

CodePudding user response：

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.

CodePudding user response：

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;