while trying to make a document editor like word (it’s a very basic editor) I tried to use classes but what I wanted didn’t work and so I created a big function that returns 2 variables and a method for printing to the screen, cause the other are used to getting the raw text and if it was deleted, these are returned as an objects, the goal is to print every instance of a TextInput that the user creates and so I put the returned objects in a list that is to be printed for the user to edit text and other stuff, with all being said the only problem is that it returns undefined even for hardcoded value while debugging I saw that the only returned values are functions that have no methods what so ever, even though it should return objects.
Here is the main page code, with the list of objects that should be printed:
import React, { useState } from "react"
import { StyleSheet, View, Text } from "react-native"
import { TextInput, TouchableOpacity } from "react-native-gesture-handler"
import { useNavigation } from "@react-navigation/native";
import { NativeStackNavigationProp } from "@react-navigation/native-stack";
import NewText from './NewText.jsx'
/*function inputfield()
{
const [text, changeText] =useState('')
return (
<View>
<TextInput
onChangeText={changeText}
value = {text}
style={styles.input}
/>
</View>)
}
*///
const Formular = (EmailPacient) => {//luam mailul pentru a adauga datele la contul corect
const [ParagrafSelectat, changeParagraf] = useState('')//daca exista paragrafe textul se va afisa
const [ListaObj, changeLista] = useState([])//o lista cu toate obiectele adaugate dinamic
///const [numberTexts,changeNumber] = useState(0)
const AddText = () => {
///changeNumber(numberTexts+1)
//console.log(NewText)
ListaObj.push(NewText)
changeLista(ListaObj);
}
const deleteObj = (toEliminateIndex) => {
ListaObj.splice(toEliminateIndex, 1);
}
return <View>
<View style = {styles.radpadding}>{/*action buttons(add only text/paragrafe cu titlu/click pentru a selecta paragrafe) */}
<TouchableOpacity onPress={AddText}><Text>adauga text</Text></TouchableOpacity>
<TouchableOpacity><Text>adauga paragraf(cu titlu)</Text></TouchableOpacity>
</View>
{ParagrafSelectat != '' ? <Text></Text> : ''/*paragraf selectat */}
<View>{/*contentul formularului*/}
{console.log(ListaObj)}
{ListaObj.map((obj, index) => {
console.log(obj)
/*if (obj.deleted == 1)
deleteObj(index)
else*/
//return <View>{obj.deleted}</View>
})}
</View>
</View>
//
}
const styles = StyleSheet.create({
input: {
height: 40,
borderColor: 'gray',
borderWidth: 1,
borderRadius: 5,
marginBottom: 20,
paddingHorizontal: 10,
},
radpadding:{
marginTop:50
}
})
export default FormularAnd here is the function that return an object that is put in the ListaObj from the previos file:
import { useState } from "react"
import { StyleSheet, View, Text } from "react-native"
import React from "react"
import { TextInput, TouchableOpacity } from "react-native-gesture-handler"
const NewText = () => {
const [text, ChangeText] = useState('')
const [deleted, changeDeleted] = useState(0)
const Print = () => {
return <View style={styles.container}>
<TouchableOpacity onPress={() => { changeDeleted(1) }} style={styles.cross}>
<Text style={styles.textX}>X</Text>
</TouchableOpacity>
<TextInput
value={text}
onChange={() => { ChangeText(text) }}
style={styles.input}
/>
</View>
}
return { Print, text, deleted }
}Ignore the commented lines they serve no purpose just some other implementations