React Native, Firebase, assigning positions to elements entered in TextInput in an array-CodePudding

I am new to programming, and I have such a problem. When entering a set of digits into TextInput for example: "5, 4 ,5, 3, 5" and so on. and sending these numbers to an array located in the Firestore turns out this: enter image description here

And it should turn out something like this: enter image description here

What is the problem? Please help me! Here is my code:

const [numberInput, setNumberInput] = useState()

// Sending a value.
const EditSubject = () => {
    const addSub = doc(db, 'users', userUID, 'evaluations', 'SecondCours', 'FirstSemestr', 'FirstSemestr');
    if (textInput != undefined) {
    updateDoc(addSub, {Mathematics: [numberInput]});
    setModalWindow(false)
    } else {
    setModalWindow(false)
    }
   }

// Getting the value.
<TextInput style={[{backgroundColor: theme.colors.addSubjectText, color: theme.colors.text1}, styles.TInput]} keyboardType = 'numeric' onChangeText={num => setNumberInput(num)}/>

I will be very grateful if you help!

CodePudding user response：

The input code you have shown above is fine. You are rendering the entire numberInput array into a single element of your UI. Try using a map to iterate over the elements of the array and generate a row for each. Your result should look very similar to the linked example, you will just need to add an element for the numbered box.

CodePudding user response：

Here is part of my code. He is responsible for displaying the table of subjects, grades and totals on the screen. And editing the same ratings. But I have this error that I mentioned above.

import React, { useState, useEffect } from 'react';
import { StyleSheet, Text, View, ScrollView, FlatList, Dimensions, TouchableOpacity, Modal, TextInput } from 'react-native';
import { gStyle } from '../../../Styles/gStyle';
import { useTheme } from 'styled-components';
import { db } from '../../../../firebase';
import {doc, updateDoc, onSnapshot, deleteField, query, collection, deleteDoc } from 'firebase/firestore';
import { getAuth, onAuthStateChanged } from "firebase/auth";

import { AntDesign } from '@expo/vector-icons';

export default function FirstSemestr() {
  const [modalWindow, setModalWindow] = useState(false)
  const [mwState, setMwState] = useState();
  const theme = useTheme();
  const [userUID, setUserUID] = useState()
  const auth = getAuth();
  const [textInput, setTextInput] = useState([])
  const [evaluations, setEvaluations] = useState([])
  const [itemIndex, setItemIndex] = useState()

  //Get data from Firebase.
  useEffect(() => {
    onAuthStateChanged(auth, (user) => {
    setUserUID(user.uid)
    const UserUID = user.uid;
    const evaluation = onSnapshot(doc(db, 'users',  UserUID, 'evaluations', 'SecondCours', 'FirstSemestr', 'FirstSemestr'), (doc) => {
      const data = doc.data();
      setEvaluations(Object.entries(data).map(([key, value]) => {return {'key': key, 'subject': ' ' key, 'marks': ' ' value.join(', ') ' ', 'itog': value.reduce((r,i) => r   i/value.length, 0.0).toFixed(1)}}))
    })
      return { evaluation }
  })
  }, [])

   //Edit Subject
   const EditSubject = () => {
    const addSub = doc(db, 'users', userUID, 'evaluations', 'SecondCours', 'FirstSemestr', 'FirstSemestr');
    if (textInput != undefined) {
    updateDoc(addSub, {[itemIndex.key]: [item]});
    setModalWindow(false)
    } else {
    setModalWindow(false)
    }
   }

  const item = Object.entries(textInput).map((key, item) => {return key});
  console.log(item);
   
   //Open my ModalWindow
   const editSubject = (item) => {
    setTextInput([])
    setMwState()
    setMwState('editSub')
    setItemIndex()
    setItemIndex(item)
    setModalWindow(true)
   }

   const cancellation = () => {
    setMwState()
    setTextInput()
    setModalWindow(false)
   }

  return (
    <View style={[{backgroundColor: theme.colors.boxBackground, alignItems: 'center'}]}>
      <ScrollView
        style={{width: '100%'}}
        horizontal={true} 
        showsVerticalScrollIndicator ={false}
        showsHorizontalScrollIndicator={false}>

      <Modal statusBarTranslucent transparent={true} animationType='fade' visible={modalWindow}>
        <View style={[{backgroundColor: theme.colors.addSubject}, styles.modalWindow]}>
        {mwState == 'eddSub' ? 
        <Text style={[{color: theme.colors.text1}, styles.modalHeaderText]}>Добавление предмета</Text>:
        mwState == 'delSub' ? 
        <Text style={[{color: theme.colors.text1}, styles.modalHeaderText]}>Удаление предмета</Text>: 
        mwState == 'editSub' ? 
        <Text style={[{color: theme.colors.text1}, styles.modalHeaderText]}>Изменение предмета</Text>:
        <Text style={[{color: theme.colors.text1}, styles.modalHeaderText]}></Text>
        }
        {mwState == 'eddSub' ? 
        <TextInput style={[{backgroundColor: theme.colors.addSubjectText, color: theme.colors.text1}, styles.TInput]} maxLength={15} onChangeText={text => setTextInput(text)}/>:
        mwState == 'delSub' ? 
        <Text style={[{color: '#ad1a00'}, styles.modalHeaderText]}>Вы дейстительно хотите удалить предмет {itemIndex.key}?</Text>: 
        mwState == 'editSub' ? 
        <View>  
        <ScrollView
        style={{width: '100%'}}
        horizontal={true} 
        showsVerticalScrollIndicator ={false}
        showsHorizontalScrollIndicator={false}>
        <View style={{flexDirection: 'row', marginLeft: 5, marginTop: 5, marginBottom: 5}}>
        <Text style={[{color: '#fff', borderWidth: 1}, styles.modalHeaderText]}>{itemIndex.key}</Text>
        <Text selectable={true} style={[{color: '#fff', borderWidth: 1}, styles.modalHeaderText]}>{itemIndex.marks}</Text>
        </View>
        </ScrollView>
        <View>
        <Text style={[{color: '#fff', marginBottom: 5}, styles.modalHeaderText]}>Для изменения введите все оценки {"\n"} (можно скопировать сверху)</Text>

        //Edit my Marks
        <TextInput style={[{backgroundColor: theme.colors.addSubjectText, color: theme.colors.text1}, styles.TInput]} keyboardType = 'numeric' onChangeText={text => setTextInput(text)}/>
        </View>
        </View>:
        <Text style={[{color: theme.colors.text1}, styles.modalHeaderText]}></Text>
        }
        {mwState == 'eddSub' ? 
        <View style={styles.buttonStyles}>
        <TouchableOpacity
          onPress={otmena}
          style={[{backgroundColor: '#ad3f00'}, styles.button]}
          >
           <Text style={[{color: theme.colors.text1}, styles.buttonText]}>Отмена</Text>
          </TouchableOpacity>
          <TouchableOpacity
          onPress={AddSubject}
          style={[{backgroundColor: '#00ad5c'}, styles.button]}
          >
           <Text style={[{color: theme.colors.text1}, styles.buttonText]}>Добавить</Text>
          </TouchableOpacity>
          </View>:
        mwState == 'delSub' ? 
        <View style={styles.buttonStyles}>
        <TouchableOpacity
          onPress={otmena}
          style={[{backgroundColor: '#00ad5c'}, styles.button]}
          >
           <Text style={[{color: theme.colors.text1}, styles.buttonText]}>Отмена</Text>
          </TouchableOpacity>
          <TouchableOpacity
          onPress={DelSubject}
          disabled={butDisTimer == 0 ? false : true}
          style={[{backgroundColor: butDisTimer == 0 ? '#ad3f00' : '#642500', }, styles.button]}
          >
           <Text style={[{color: theme.colors.text1}, styles.buttonText]}>{butDisTimer == 0 ? 'Удалить' : butDisTimer}</Text>
          </TouchableOpacity>
          </View>: 
        mwState == 'editSub' ? 
        <View style={styles.buttonStyles}>
        <TouchableOpacity
          onPress={otmena}
          style={[{backgroundColor: '#ad3f00'}, styles.button]}
          >
           <Text style={[{color: theme.colors.text1}, styles.buttonText]}>Отмена</Text>
          </TouchableOpacity>
          <TouchableOpacity
          onPress={EditSubject}
          style={[{backgroundColor: '#00ad5c'}, styles.button]}
          >
           <Text style={[{color: theme.colors.text1}, styles.buttonText]}>Изменить</Text>
          </TouchableOpacity>
          </View>:
        <Text style={[{color: theme.colors.text1}, styles.modalHeaderText]}></Text>
        }
        </View>
      </Modal>

      //Displaying a table with subjects, grades, and the result of grades.
      <View style={{marginBottom: 10, width: '100%'}}>
      <View style={[styles.table]}>
        <Text style={[{color: theme.colors.text1}, styles.tableHeaderSubject]}>Предмет</Text>
        <Text style={[{color: theme.colors.text1}, styles.tableHeaderMarks]}>Оценки</Text>
        <Text style={[{color: theme.colors.text1, backgroundColor: theme.colors.background}, styles.tableHeaderItog]}>Итог</Text>
        <Text style={[{color: theme.colors.text1}, styles.tableHeaderEdit]}>Изменить</Text>
        
      </View>
      <View style={[styles.table]}>
      <FlatList 
      horizontal={false}
      showsVerticalScrollIndicator = {false}
      showsHorizontalScrollIndicator = {false}
      data={evaluations.sort((a, b) => a.key.localeCompare(b.key))} 
      renderItem={({item}) => (
        <View style={[styles.table]}>
        <Text style={[{color: theme.colors.text1, width: 175,}, styles.tableSubject]}>{item.subject}</Text>
        <Text style={[{color: theme.colors.text1, flex: 1}, styles.tableMarks]}>{item.marks}</Text>
        <Text style={[{color: theme.colors.text1, width: 60, backgroundColor: theme.colors.background}, styles.tableItog]}>{item.itog}</Text>
        <View style={[{width: 98, flexDirection: 'row'}]}>
        <TouchableOpacity
        onPress={() => editSubject(item)}
        style={[{}, styles.editButton]}
        >
          <AntDesign name="edit" size={26} color={'#008648'} />
        </TouchableOpacity>
        <TouchableOpacity
        onPress={() => delSubject(item)}
        style={[{}, styles.editButton]}
        >
          <AntDesign name="delete" size={26} color={'#ad3f00'} />
        </TouchableOpacity>
        </View>
      </View>
      )}/>
      </View>
      </View>
        </ScrollView>
        <TouchableOpacity
        onPress={() => eddSubject()}
        style={gStyle.CouEvalTableNewEval}
        >
          <Text style={[{color: theme.colors.text1}, gStyle.CouEvalTableNewEvalText]}>Добавить предмет</Text>
        </TouchableOpacity>
    </View>
  );
}