How to fetch object data from Modal Input to Homepage with Array Function for making Contact List?

Question

I am new in this field, want to learn coding in React native to develop Mobile App.

I want to develop one Contact List with React Native In Home page I put one (+) button to toggle / opening of the Modal with Text Input boxes and one Submit button to close. After putting my Text Input in the Input boxes( Name, Email and Phone), clicking the submit button the Modal is closing but the Text Input object data are not appearing in Home page. I want to bring the Text Input object data to the Homepage with Array Function as total Contact List which object data I tried to pass through Modal Text Input.

The Modal is closing properly, but the Text Input object data are not being passed to the Home page where I intended to get. I tried to paste my codes here but the system is not accepting giving error everytime.

AddContactOne.js

import { Image, Modal, StyleSheet, Text, TouchableOpacity, View } from 'react-native'
import React, { useState } from 'react'
import Input from '../../components/Input'


const AddContactOne = () => {

  const [name, setName] = useState([]);
  const [email, setEmail] = useState([]);
  const [phone, setPhone] = useState([]);
  const [modalVisible, setModalVisible] = useState(false);
  const toggleModal = () => { setModalVisible(!modalVisible); };

  return (

    <View style={styles.container}>
      <Text style={styles.txt1}>Contact List</Text>
      <TouchableOpacity
        onPress={(v) => toggleModal(v)}
        style={{
          height: 50,
          width: 50,
          backgroundColor: 'white',
          position: 'absolute',
          bottom: 30,
          right: 30,
          borderRadius: 30,
          shadowColor: 'black',
          elevation: 8,
          alignItems: 'center',
          justifyContent: 'center'
        }}>
        <Image
          source={{
            uri: 'https://cdn-icons-png.flaticon.com/128/748/748113.png',
          }}
          style={{
            height: 30,
            width: 30,
          }}
        />
        <Modal
          animationType="slide"
          transparent={true}
          visible={modalVisible}
          onRequestClose={toggleModal}>
          <View
            style={{
              height: 320,
              width: '85%',
              borderRadius: 10,
              alignSelf: 'center',
              alignContent: 'center',
              justifyContent: 'center',
              marginTop: 150,
              backgroundColor: "blue",
            }}>
            <Text style={styles.txt2}>Add Contact</Text>
            <Input
              value={name}
              placeholder={'Enter Name'}
              placeholderTextColor={'white'}
              marginTop={10}
              onChangeText={v => setName(v)}
            />
            <Input
              value={email}
              placeholder={'Enter Email'}
              placeholderTextColor={'white'}
              marginTop={10}
              onChangeText={v => setEmail(v)}
            />
            <Input
              value={phone}
              placeholder={'Enter Phone Number'}
              placeholderTextColor={'white'}
              marginTop={10}
              onChangeText={v => setPhone(v)}
            />
            <TouchableOpacity
              style={{
                backgroundColor: 'white',
                alignItems: 'center',
                justifyContent: 'center',
                height: 50,
                margin: 20,
                borderRadius: 10,
              }}

              // onPress= {() => {
              //   setModalVisible(false)
              //   props?.navigation?.navigate('AddContactOne', {
              //         name: name,
              //         email: email,
              //           phone: phone
              //       })} 
              //     }
              onPress={toggleModal}
              name={(v) => setName(v)}
              email={(v) => setEmail(v)}
              phone={(v) => setPhone(v)}
            >
              <Text style={{
                color: 'black',
                fontSize: 20,
              }}>Submit</Text>
            </TouchableOpacity>
          </View>
        </Modal>
      </TouchableOpacity>
    </View>
  )
}

export default AddContactOne

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
    backgroundColor: 'white',
    width: '100%',
    alignContent: 'center',
    alignItems: 'center',
    marginTop: 20,
  },
  txt1: {
    fontSize: 25,
    fontWeight: '400'
  },
  txt2: {
    fontSize: 20,
    fontWeight: '350',
    textAlign: 'center',
    marginBottom: 6

  }

})




App.js


import { SafeAreaView } from 'react-native'
import React from 'react'
import Task from './src/screens/main/Task';
import AddContact from './src/screens/main/AddContact';
import AddContactOne from './src/screens/main/AddContactOne';
import AddContactTwo from './src/screens/main/AddContactTwo';


const App = () => {
  return (
    // <Welcome /> 
    // <SignUp/>
    // <Task/>
    // <AddContact/>
    <AddContactOne/>
    // <AddContactTwo/>
  )
}

export default App

Answer 1

I see you're facing an issue.

From what I can tell, the problem seems to be that you're not rendering the data stored in the state correctly. Additionally, I noticed that you're using an array for name, email, and phone, but these should be individual states since they hold single values, not arrays.

You should create separate states for name, email, and phone (as strings), and another state to hold the entire contact list. I've also tried to solve your problem by making these changes and added some styling for better visibility.

Here’s an updated version of your code:

import React, { useState } from 'react';
import {
  Image,
  Modal,
  StyleSheet,
  Text,
  TextInput,
  TouchableOpacity,
  View,
} from 'react-native';

const AddContactOne = () => {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [phone, setPhone] = useState('');
  const [contacts, setContacts] = useState([]);

  const [modalVisible, setModalVisible] = useState(false);
  const toggleModal = () => {
    setModalVisible(!modalVisible);
  };

  const addContact = () => {
    const contact = {
      name: name,
      email: email,
      phone: phone,
    };
    setContacts([...contacts, contact]);
    setName('');
    setEmail('');
    setPhone('');
    toggleModal();
  };

  return (
    <View style={styles.container}>
      <Text style={styles.txt1}>Contact List</Text>
      {contacts.map((contact, index) => (
        <View
          key={index}
          style={{
            width: '100%',
            marginTop: 10,
            padding: 10,
            borderWidth: 1,
          }}>
          <Text style={styles.txt}>{contact.name}</Text>
          <Text style={styles.txt}>{contact.email}</Text>
          <Text style={styles.txt}>{contact.phone}</Text>
        </View>
      ))}
      <TouchableOpacity
        onPress={toggleModal}
        style={{
          height: 50,
          width: 50,
          backgroundColor: 'white',
          position: 'absolute',
          bottom: 30,
          right: 30,
          borderRadius: 30,
          shadowColor: 'black',
          elevation: 8,
          alignItems: 'center',
          justifyContent: 'center',
        }}>
        <Image
          source={{
            uri: 'https://cdn-icons-png.flaticon.com/128/748/748113.png',
          }}
          style={{
            height: 30,
            width: 30,
          }}
        />
        <Modal
          animationType="slide"
          transparent={true}
          visible={modalVisible}
          onRequestClose={toggleModal}>
          <View
            style={{
              height: 320,
              width: '85%',
              borderRadius: 10,
              alignSelf: 'center',
              alignContent: 'center',
              justifyContent: 'center',
              marginTop: 150,
              backgroundColor: 'blue',
            }}>
            <Text style={styles.txt2}>Add Contact</Text>
            <TextInput
              value={name}
              placeholder={'Enter Name'}
              placeholderTextColor={'white'}
              marginTop={10}
              onChangeText={setName}
            />
            <TextInput
              value={email}
              placeholder={'Enter Email'}
              placeholderTextColor={'white'}
              marginTop={10}
              onChangeText={setEmail}
            />
            <TextInput
              value={phone}
              placeholder={'Enter Phone Number'}
              placeholderTextColor={'white'}
              marginTop={10}
              onChangeText={setPhone}
            />
            <TouchableOpacity
              style={{
                backgroundColor: 'white',
                alignItems: 'center',
                justifyContent: 'center',
                height: 50,
                margin: 20,
                borderRadius: 10,
              }}
              onPress={addContact}>
              <Text
                style={{
                  color: 'black',
                  fontSize: 20,
                }}>
                Submit
              </Text>
            </TouchableOpacity>
          </View>
        </Modal>
      </TouchableOpacity>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
    backgroundColor: 'white',
    alignContent: 'center',
    alignItems: 'center',
    marginTop: 20,
    paddingHorizontal: 20,
  },
  txt1: {
    fontSize: 25,
    fontWeight: '400',
    color: 'black',
  },
  txt2: {
    fontSize: 20,
    fontWeight: '350',
    textAlign: 'center',
    marginBottom: 6,
  },
  txt: {
    fontSize: 20,
    fontWeight: '400',
    color: 'black',
  },
});

const App = () => {
  return <AddContactOne />;
};

export default App;