Develop Reference

Modal not updating to new item in array,firebase/react native state

my current issue with my react native app is that when a user wants to open a lesson (from the lessons array with each object being a lesson with a title,description,img url etc)to make it bigger through a modal, its state does not update. What i Mean by this is that the books title,description,and other attributes won't change if you press on a new lesson. What would be the solution to this?
export default function Learn() {
const [modalVisible, setModalVisible] = useState(false);
const [lessons,setLessons] = useState()
useEffect(() => {
async function data() {
try {
let todos = []
const querySnapshot = await getDocs(collection(db, "lessons"));
querySnapshot.forEach((doc) => {
todos.push(doc.data())
});
setLessons(todos)
console.log(lessons)
}
catch(E) {
alert(E)
}
}
data()
}, [])
return (
<View style={learnStyle.maincont}>
<View>
<Text style={{fontSize:28,marginTop:20}}>Courses</Text>
<ScrollView style={{paddingBottom:200}}>
{lessons && lessons.map((doc,key) =>
<>
<Modal
animationType="slide"
transparent={true}
visible={modalVisible}
onRequestClose={() => {
Alert.alert("Modal has been closed.");
setModalVisible(!modalVisible);
}}
>
<View style={styles.centeredView}>
<View style={styles.modalView}>
<Image source={{
uri:doc.imgURL
}} style={{width:"100%",height:300}}/>
<Text style={{fontWeight:"700",fontSize:25}}>{doc.title}</Text>
<Text style={{fontWeight:"700",fontSize:16}}>{doc.desc}</Text>
<Pressable
style={[styles.button, styles.buttonClose]}
onPress={() => setModalVisible(!modalVisible)}
>
<Text style={styles.textStyle}>Hide Modal</Text>
</Pressable>
</View>
</View>
</Modal>
<LessonCard setModalVisible={setModalVisible} title={doc.title} desc={doc.desc} img1={doc.imgURL} modalVisible={modalVisible}/>
</>
)}
<View style={{height:600,width:"100%"}}></View>
</ScrollView>
</View>
</View>
)
}
What it looks like:
**image 1 is before you press the modal and the 2nd one is after
**the main issue though is that if you press cancel and press on another lesson the modal that opens has the the same state(title,imgurl,anddesc) as the first lesson and does not change.

The problem is that you create a lot of modal windows through the map function, I suggest making one window and passing the key as a parameter and using it to search for a specific array of data that is shown to the user (photo, title, etc.)

The problem is that all 3 Modals are controlled by the one state variable. So when the code sets modalVisible to true, all 3 modals are being opened at once.
You can fix this in a few ways, but a simple way would be to move the Modal and its state into the LessonCard component. This way each modal will have its own state that's only opened by its card. So the loop in Learn will just be:
{lessons && lessons.map((doc,key) => (
<LessonCard lesson={doc} key={key} />
)}
Adding to address question in comments
LessonCard should not accept setModalVisible or modalVisible props. The
const [modalVisible, setModalVisible] = useState(false);
should be inside LessonCard, not Learn. That way each Card/Modal pair will have its own state.
Additionally, although React wants you to pass the key into LessonCard in the map function, LessonCard should not actually use the key prop for anything. See https://reactjs.org/docs/lists-and-keys.html#extracting-components-with-keys
So, the LessonCard declaration should just be something like
export default function LessonCard({lesson}) {

React Native state and props, callbacks problem

I'm having problems with passing props and this whole stuff. Apparently i did something wrong maybe someone can tell me what should i fix there.
So these are states and callbacks that i use:
const [isVisible, setIsVisible] = useState(false);
const visibleCallBack = () => {
setIsVisible(false);
};
const [budynekText, setBudynekText] = useState("budynek");
const budynekCallBack = (propFromChild) => {
setBudynekText(propFromChild);
};
isVisible should decide whether to render or not a certain component:
<TouchableOpacity onPress={() => setIsVisible(true)}>
<View style={styles.budynekContainer}>
<Text style={styles.budynekTekst}>{budynekText}</Text>
{isVisible ?
<Rozwijana callBack={visibleCallBack} budCallBack={budynekCallBack}/>
: null}
</View>
Here I'm passing these callback functions as a props to "Rozwijana",
"Rozwijana" looks like that:
export const Rozwijana = ({callBackProp, budCallBackProp}) => {
return (
<View style={styles.rozwijanaPoz}>
<Pusty/>
<Box name={"budynek 1"} callBackProp={callBackProp} budCallBackProp={budCallBackProp}/>
<Box name={"budynek 2"} callBackProp={callBackProp} budCallBackProp={budCallBackProp}/>
<Box name={"budynek 3"} callBackProp={callBackProp} budCallBackProp={budCallBackProp}/>
</View>
);
}
Then i pass these callbacks down to "Box" component:
const Box = ({name, callBackProp, budCallBackProp}) => {
return (
<>
<TouchableHighlight onPress={() => {callBackProp(); budCallBackProp(name);}}>
<View style={styles.inputBox}>
<Text style={styles.testText}>{name}</Text>
</View>
</TouchableHighlight>
</>
);
}
The result is, that when i click first time at "budynek" button it works as expected, it opens my "list" but after that, when i try to click any of "Boxes" nothing happens. Is there something wrong? If so, how do i go about making this work? Thanks

How to pass data from Class to function in React Native array, firebase, stack navigator v5

Hay I am struggling on how to pass data that's in a class, to another react native component. I am able to display data on the same screen, however I want to have the user input some text and have it display on another screen.
1) Initial Screen: User presses button to navigate to text inputs, and will navigate back to this screen to view the list. Note: If I add the list here I get an error "undefined is not an object". Because I was not able to figure out how to PASS THE LISTARRAY variable to that screen.
export const GoalsScreen = ({ navigation }) => {
return (
<SafeAreaView style={styles.container}>
<Header>
{/* header title */}
<Text style={styles.goalText}> Expand your life</Text>
{/* add goal button goto stack */}
<TouchableOpacity onPress={() => navigation.navigate("AddGoal")} >
<Text style={styles.addBtn}> + </Text>
</TouchableOpacity>
</Header>
{/* Error here, need to get data from other screen */}
<FlatList
data={this.state.listArray}
renderItem={({ item, index }) => {
return (
<View>
<Text style={{ fontSize: 30 }}>{item.fireListGoal} </Text>
<Text style={{ fontSize: 20 }}>{item.fireListCat}</Text>
<Text style={{ fontSize: 15 }}> {item.fireListWhy}</Text>
</View>
);
}}
>
</FlatList>
</SafeAreaView>
);
}
2) List Screen: If I put the flatList here everything works, but I need to PASS THE DATA thats inputted here in the firebase real-time database and display it on the other screen shown above.
export class AddGoalList extends React.Component {
// state and defult values
constructor(props) {
super(props)
// set inital values
this.state = {
listArray: [],
goal: '',
category: 'Pick One',
why: '',
}
}
//triggers rerendering, put values in a JSON array
componentDidMount() {
goalsRef.on('value', (childSnapshot) => {
const listArray = [];
childSnapshot.forEach((doc) => {
listArray.push({
key: doc.key,
fireListGoal: doc.toJSON().fireListGoal,
fireListCat: doc.toJSON().fireListCat,
fireListWhy: doc.toJSON().fireListWhy
});
this.setState({
listArray: listArray.sort((a, b) => {
return (
a.fireListGoal < b.fireListGoal,
a.fireListCat < b.fireListCat,
a.fireListWhy < b.fireListWhy
);
}),
});
});
});
}
// when button pressed...
onGoal = ({ }) => {
// if form empty alert user
if (this.state.goal.trim() && this.state.why.trim() === '') {
alert("Please fill form.");
return;
}
if (this.state.category.valueOf() === 'Pick One') {
alert("Fill in all inputs.");
return;
}
// otherwise push data to firebase
goalsRef.push({
fireListGoal: this.state.goal,
fireListCat: this.state.category,
fireListWhy: this.state.why
});
}
render() {
return (
// KeyboardAvoidingView ==> prevent keyboard from overlapping
<KeyboardAvoidingView style={styles.container}>
<SafeAreaView>
<Text>Sparks your life!</Text>
{/* Goal title */}
<Text>What is your goal</Text>
<TextInput
placeholder="Enter your goal"
keyboardType='default'
onChangeText={
(text) => {
this.setState({ goal: text });
}
}
value={this.state.goal}
/>
{/* pick selected cetegory */}
<Text>Pick a Category</Text>
{/* picker component */}
<Picker
selectedValue={this.state.category}
onValueChange={(itemValue) => this.setState({ category: itemValue })}
>
<Picker.Item label="Pick One" value="Pick One" />
<Picker.Item label="Fitness" value="Fitness" />
<Picker.Item label="Health" value="Health" />
<Picker.Item label="Travel" value="Travel" />
<Picker.Item label="Wealth" value="Wealth" />
<Picker.Item label="Creativity" value="Creativity" />
<Picker.Item label="Skills" value="Skills" />
</Picker>
<Text>Why did you pick this goal?</Text>
<TextInput
placeholder="Enter your why"
keyboardType='default'
onChangeText={
(text) => {
this.setState({ why: text });
}
}
value={this.state.why}
/>
{/* nav back to My Goal list */}
<Button title="add goal" onPress={this.onGoal.bind(this)} />
</SafeAreaView>
{/* remove list here and add to other GoalsScreen */}
<FlatList
data={this.state.listArray}
renderItem={({ item, index }) => {
return (
<View>
<Text style={{fontSize: 30}}>{item.fireListGoal} </Text>
<Text style={{fontSize: 20}}>{item.fireListCat}</Text>
<Text style={{fontSize: 15}}> {item.fireListWhy}</Text>
</View>
);
}}
>
</FlatList>
</KeyboardAvoidingView>
);
}
}
I have tried to useState and pass data as a param but got errors, in able to use the variable navigation in a class..? Also tried to put it in a separate function and that did now work ether. I'll add my code bellow so you can take a look. Any suggestions and or references to any helpful docs would really be appreciated.
Would really appreciate some help, been trying to resolve this for the past few days with no luck. Many thanks!

If i understand the flow correctly, what you want is the following:
Initially, you have a first screen with a list of items (GoalsScreen). From there the user can open a new screen, where he can add items (AddGoalScreen). So, when the user goes back, you want him to see the updated list.
First of all, in the above code, the GoalsSrceen has not defined any state listArray, so that's why you get undefined error. You need to declare it just like you did in AddGoalScreen. Also, as i can see, the AddGoalScreen will no longer display this listArray, so you can simply move the goalsRef.on('value', ... subscription in the GoalsScreen. Doing so, each time you push to the firebase through AddGoalScreen, the on('value') subscription will be triggered inside GoalsScreen, and the GoalsScreen will rerender, keeping its state available. So you have your problem fixed

Can a single button do different things?

I have two buttons to do two actions, is it possible to have only one button that should change the text and the actions that it does?
<TouchableOpacity style={styles.button} onPress={() => this.stopFunction()}>
<Text style={styles.buttonTesto}>STOP</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.button} onPress={() => this.startFunction()}>
<Text style={styles.buttonTesto}>START</Text>
</TouchableOpacity>
So the first time is Start, when the user clicks, the button launch the startFunction and change the text in Stop.

I suppose you have a state variable running
this.state = { running : true }
Now Inside your render method get the state data :
const { running } = this.state
your button should look like this :
<TouchableOpacity style={styles.button} onPress={() => this.uniqueFunction()}>
<Text style={styles.buttonTesto}>
{ running ? 'STOP' : 'START'}
</Text>
</TouchableOpacity>
Now your unique function have to do the two actions depends on application running status:
uniqueFunction = () => {
const { running } = this.state
if( running ) {
// The action you want to do when start button is pressed
}else
// The action you want to do when stop button is pressed
}

You need a state variable, and then you can use conditional rendering based on value of the variable. Like this:
<TouchableOpacity style={styles.button}
onPress={() => {this.state.flag ? this.stopFunction() : this.startFunction()}}
>
<Text style={styles.buttonTesto}>{this.state.flag? "STOP" : "START"}</Text>
</TouchableOpacity>

Keyboard disappears on every key press in React Native

I want to map key value pairs in react native. The value being editable text entry. The mapped components show up fine, but when I try to edit the TextInput, the keyboard disappears when i type the first letter. Don't know whats causing the problem.
If i just put a TextInput in the parent element, it works absolutely fine but doesn't work when I use the map function.
<View style={styles.main}>
<View>
{this._getDetailElements()}
</View>
</View>
_getDetailElements() function
_getDetailElements = () => {
return Object.keys(this.state.data).map(elem => (
<View key={shortid.generate()} style={styles.element}>
<TextInput
editable={this.state.editable}
onChangeText={text => this.setState({seletedText: text})}
value={this.state.selectedText}
/>
</View>
)
);
}

i think you should just change the value to defaultValue Like this :
<TextInput
editable={this.state.editable}
onChangeText={text => this.setState({seletedText: text})}
defaultValue={this.state.selectedText}
/>
Good luck

It's because your key on the map changes everytime it rerenders.
Just use the index of the map iteration as key
_getDetailElements = () => {
return Object.keys(this.state.data).map((elem, index) => (
<View key={index} style={styles.element}>
<TextInput
editable={this.state.editable}
onChangeText={text => this.setState({seletedText: text})}
value={this.state.selectedText}
/>
</View>
)
);
}