Develop Reference

I can't render my data from the DB with a .map

I'm currently working on a react native app, and I have an issue about render information (in an array) that I fetch from my DB. To do that I have to write a .map.
I receive the data from the fetch in the console.log.
When I call my function with this "()".
<Text>Choisissez votre Choix Club </Text>
<TouchableOpacity>
<View>
<Text>{this.renderMesClubs()}</Text>
</View>
</TouchableOpacity>
An error message appear
TypeError: undefined is not an object (evaluating '_this.state.sport.club.map')
Below you can find the all code page.
class ChoixClub extends Component {
constructor(props) {
super(props);
this.state = {
sport: {club: []},
};
}
getMesClubs = () => {
const headers = new Headers({'Content-type': 'application/json'});
const options = {
method: 'GET',
headers: headers,
};
fetch('http://localhost:8080/inscription/sport', options)
.then((response) => {
return response.json();
})
.then(
(data) => {
const club = JSON.stringify(data);
this.setState({sport: club});
console.log(this.state.sport.club);
},
(err) => {
console.log(err);
},
);
};
renderMesClubs = () => {
return this.state.sport.club.map((element) => {
return (
(
<View className="articles">
<Text>{element.nomClub}</Text>
</View>
),
console.log(element.nomClub)
);
});
};
componentDidMount() {
this.getMesClubs();
}
render() {
return (
<SafeAreaView>
<Text>Choisissez votre Choix Club </Text>
<TouchableOpacity>
<View>
<Text>{this.renderMesClubs()}</Text>
</View>
</TouchableOpacity>
<Text>Choisissez votre rival</Text>
<TouchableOpacity></TouchableOpacity>
</SafeAreaView>
);
}
}
export default ChoixClub;
I hope my message is clear enough for you to solve it, and thanks in advance for your answer!

You are calling JSON.stringify(data), which turns "data" into a string. assuming that the server is returning valid JSON, then calling response.json(), which you are already doing, should give you a Javascript object, hopefully an array, you should map over that, not turn it back into a string and map over the string.
to check if data really is an array you can use:
if(!Array.isArray(data)){
throw new Error('expected the response to be an array');
}

All your data is actually contained by an array, so you need to specify the element or iterate it. As #user1852503 said, no JSON.stringify is needed because .then((response) => { return response.json(); }) does the trick
// Let's your data
let data = [ { "_id": "5f44dcc0a3da3a3008a71e5d", "sport": { "_id": "5f44dcc0a3da3a3008a71e5e", "club": [ { "_id": "5f44dcc0a3da3a3008a71e5f", "nomClub": "String", "classement": "String", "dateMatch": "String", "classementDB": "String" } ] }, "__v": 0 } ];
data[0].sport.club.map(element => {
// I just console log it to see if it works
console.log(element.nomClub)
})

Firebase + React Native - Grab each Document ID

I have been stuck on this for ages trying to figure out how I can console log each Firebase Cloudstore document ID separately when I press onto each rendered FlatList item.
I can grab a certain key / id by using onPress={() =>{console.log(this.state.posts[0].key)}} etc. But I dont know how to grab each one separately. In essence I only want the document ID of the touchableOpacity I have pressed. Not just [0]
Screenshots are below of App layout so you can get an understanding and also code example
PostsLayout.js
export default class PostsLayout extends React.Component {
render() {
const {summary, stringTime, user} = this.props;
return (
<TouchableOpacity
style={styles.container}
onPress={this.props.onPress}
>
<PostsUser user={user}/>
<PostsSummary summary={summary}/>
<PostsDate time={stringTime}/>
</TouchableOpacity>
)
}
}
FlatListLayout.js
export default class FlatListLayout extends React.Component {
render() {
return (
<ScrollView >
<FlatList
data={this.props.data}
renderItem={({item}) => <PostsLayout {...item} onPress={this.props.onPress}/>}
/>
</ScrollView>
)
}
}
ScreenLayout.js
export default class ScreenLayout extends React.Component {
state = {
posts: []
}
db = firebase.firestore()
path = this.db.collection('usersData').doc(firebase.auth().currentUser.uid).collection("posts")
onCollectionUpdate = (querySnapshot) => {
const posts = [];
querySnapshot.forEach((doc) => {
const {summary, time, stringTime, user, userId} = doc.data();
posts.push({
key: doc.id, doc, summary,
time, stringTime, user, userId
});
});
this.setState({
posts
});
}
componentDidMount() {
const {currentUser} = firebase.auth();
this.setState({currentUser})
this.unsubscribe = this.path.onSnapshot(this.onCollectionUpdate)
}
componentWillUnmount() {
this.unsubscribe();
}
render() {
return (
<FlatListLayout
data={this.state.posts}
onPress={() => {console.log(this.state.posts[0].key)}}
/>
)
}
}
Thank you for reading this and please help :)

So the easiest fix would be send a function argument from the original press event in the child level.
For example, PostsLayout has the main onPress, so on this call just send back any data you need, each component will have specific data related to the component. As each react child is unique.
PostsLayout.js
export default class PostsLayout extends React.Component {
handleOnPress = () => {
const { onPress, index } = this.props;
if( typeof onPress === 'function') {
onPress(this.props, index); // here pass anything you want in the parent level, like even userm stringtime etc
}
}
render() {
const {summary, stringTime, user} = this.props;
return (
<TouchableOpacity
style={styles.container}
onPress={this.handleOnPress}
>
<PostsUser user={user}/>
<PostsSummary summary={summary}/>
<PostsDate time={stringTime}/>
</TouchableOpacity>
)
}
}
FlatListLayout.js
export default class FlatListLayout extends React.Component {
render() {
return (
<ScrollView >
<FlatList
data={this.props.data}
renderItem={({item, index }) => <PostsLayout {...item} index={index} onPress={this.props.onPress}/>}
/>
</ScrollView>
)
}
}
ScreenLayout.js
export default class ScreenLayout extends React.Component {
state = {
posts: []
}
db = firebase.firestore()
path = this.db.collection('usersData').doc(firebase.auth().currentUser.uid).collection("posts")
onCollectionUpdate = (querySnapshot) => {
const posts = [];
querySnapshot.forEach((doc) => {
const {summary, time, stringTime, user, userId} = doc.data();
posts.push({
key: doc.id, doc, summary,
time, stringTime, user, userId
});
});
this.setState({
posts
});
}
componentDidMount() {
const {currentUser} = firebase.auth();
this.setState({currentUser})
this.unsubscribe = this.path.onSnapshot(this.onCollectionUpdate)
}
componentWillUnmount() {
this.unsubscribe();
}
render() {
return (
<FlatListLayout
data={this.state.posts}
onPress={(data, index) => {console.log(data); console.log(this.state.posts[index].key)}}
/>
)
}
}
Let me know if this doesn't make any sense :)

Delete Item by Key, Firebase React Native

I have a simple Notes React Native app and I am able to add and get data to it, but I am not sure how to remove/update data. The main problem is in getting the part where I tell firebase which data to remove. How can I pass a firebase key to a 'delete' function that takes the key as parameter and remove it from firebase.
I'm an absolute beginner at React Native, my code is the following:
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = {
all_notitas: [],
notita_text: ''
};
};
componentWillMount() {
const notitasRef = firebase.database().ref('notitas');
this.listenForNotitas(notitasRef);
};
listenForNotitas = (notitasRef) => {
notitasRef.on('value', (dataSnapshot) => {
var aux = [];
dataSnapshot.forEach((child) => {
aux.push({
date: child.val().date,
notita: child.val().notita
});
});
this.setState({all_notitas: aux});
});
}; // listenForNotitas
render() {
let show_notitas = this.state.all_notitas.map((val, key) => {
return (
<Notita
key={key}
keyval={key}
val={val}
eventDeleteNotita={()=>this.deleteNotita(key)}> // I THINK THIS IS THE PROBLEM
</Notita>
);
});
return (
<View style={styles.container}>
<View style={styles.header}>
<Text style={styles.headerText}>NOTITAS</Text>
</View>
<ScrollView style={styles.scrollContainer}>
{show_notitas}
</ScrollView>
<View style={styles.footer}>
<TouchableOpacity
style={styles.addButton}
onPress={this.addNotita.bind(this)}>
<Text style={styles.addButtonText}>+</Text>
</TouchableOpacity>
<TextInput
style={styles.textInput}
placeholder='>>> Escribir notita'
placeholderTextColor='white'
underlineColorAndroid='transparent'
onChangeText={(notita_text) => (this.setState({notita_text}))}
value={this.state.notita_text}>
</TextInput>
</View>
</View>
);
}
addNotita() {
if (this.state.notita_text) {
var d = new Date();
dataForPush = {
'date': d.getDate() + '-' + d.getMonth() + '-' + d.getFullYear(),
'notita': this.state.notita_text
};
firebase.database().ref('notitas').push(dataForPush);
this.state.all_notitas.push(dataForPush);
this.setState(
{
all_notitas: this.state.all_notitas,
notita_text: '', // Limpiar input
}
)
} // end if
} // addNotita
When I do 'console.log(key)', it returns an int like 0, 1, 2, etc. It should return a firebase key like '-LRtghw8CjMsftSAXMUg' for example. I don't know what I am doing wrong and how to fix it.
deleteNotita(key) {
firebase.database().ref('notitas').child('' + key).remove()
/*
let updates = {};
console.log(key);
console.log(updates['/notitas/' + key]);
updates['/notitas/' + key] = null;
firebase.database().ref().update(updates); */
this.state.all_notitas.splice(key, 1);
this.setState({all_notitas: this.state.all_notitas});
} // deleteNotita
}

You're dropping the key from Firebase when you're adding the notes to aux. The solution is to also keep the key from Firebase in there:
notitasRef.on('value', (dataSnapshot) => {
var aux = [];
dataSnapshot.forEach((child) => {
aux.push({
date: child.val().date,
notita: child.val().notita,
id: child.key
});
});
this.setState({all_notitas: aux});
}
And then pass that value to deleteNotita with:
this.deleteNotita(val.id)

React Native - Passing fetch data to Modal and using StackNavigator with Modal

In here I have two problems. First is I'm trying to fetch dome data from my api and then pass this data to modal upon tapping a button. I have tried to use "state" and then declare that state like;
constructor(props){
super(props)
this.state = {
tbl: [],
tbl_no: null,
}
}
fetchTblOccpd = async () => {
const response = await fetch('http://192.168.***.***:****/PndngVRoutes/Occupied/');
const json = await response.json();
this.setState({ tbl: json })
this.setState({ tbl_no: json })
}
render() {
return (
.....
<PndModal
modalVisible = { this.state.modalVisible }
setModalVisible = { (vis) => { this.setState({ modalVisible: vis }) }}
tbl_no = { this.state.tbl_no }
/>
)
}
But this didn't work. I'm targeting to fetch a data and pass it to my Modal.
Sample
My Second question is after passing some data to Modal, I'm targeting to navigate to another screen/view from my modal.
here's my code
export default class PndModal extends Component {
constructor(props) {
super(props);
this.state = {
pnd_Data: [],
modalVisible: props.modalVisible,
};
}
componentWillReceiveProps(nextProps) {
this.setState({
modalVisible: nextProps.modalVisible,
tbl_no: nextProps.tbl_no, //This is the data I'm trying to pass.
})
}
fetchOrdered = async () => {
const response = await fetch("http://192.168.254.***:****/PndngVRoutes/PendingView/" + this.state.tbl_no);
const json = await response.json();
this.setState({ pnd_Data: json })
}
componentDidMount() {
this.fetchOrdered();
}
_onPressItem = () => {
this.setState({
modalVisible: false,
});
}
render() {
return (
<Modal>
<View>
<View>
<View>
<Text>Table No: { this.state.tbl_no }</Text>
<FlatList
data = {this.state.pnd_Data}
numColumns = { 2 }
keyExtractor={(item, index) => index.toString()}
renderItem = {({ item }) =>
<View>
<Text>{ item.menu_name }</Text>
</View>
}
/>
<TouchableOpacity
onPress = { () => this.props.navigation.navigate('pend') }> // This is my navigation code
<Text>Add Order</Text>
</TouchableOpacity>
</View>
</View>
</View>
</Modal>
)
}
}

Hello Am not too use to react native but i think is must be the same as react , for the solution to your problem , i think you should use reusable component . then create then pass your data as a props.
Here is an example in react.
//My reusable component
const Modal=(props) =>{
return (
<div>
{props.data}
</div>
);
}
}
Then you call your reusable component then pass the results from the api to it.
<Modal
data ={this.state.pnd_Data}
/>
for the second question you can just add link that will navigate you .... there will be no problem for that .
you can read about reusable component here
https://itnext.io/react-component-class-vs-stateless-component-e3797c7d23ab

ReactNative null is not an object (evaluating 'this.state.dataSource')

I am running the following code in Android emulator but I am getting null is not an object (evaluating 'this.state.dataSource') error.
Please, could you help me to see what I am doing wrong? For some reason the line dataSource={this.state.dataSource} is getting null.
import React, {
Component
} from 'react';
import {
AppRegistry,
ActivityIndicator,
ListView,
Text,
View,
StyleSheet
} from 'react-native';
import Row from './Row';
import Header from './Header';
import SectionHeader from './SectionHeader';
const styles = StyleSheet.create({
container: {
flex: 1,
marginTop: 20,
},
separator: {
flex: 1,
height: StyleSheet.hairlineWidth,
backgroundColor: '#8E8E8E',
},
});
export default class NoTocarList extends Component {
constructor(props) {
super(props);
const getSectionData = (dataBlob, sectionId) => dataBlob[sectionId];
const getRowData = (dataBlob, sectionId, rowId) =>
dataBlob[`${rowId}`];
fetch('http://xxxxx.mybluemix.net/get')
.then((response) => response.json())
.then((responseJson) => {
const ds = new ListView.DataSource({
rowHasChanged: (r1, r2) => r1 !== r2,
sectionHeaderHasChanged: (s1, s2) => s1 !== s2,
getSectionData,
getRowData
});
const {
dataBlob,
sectionIds,
rowIds
} =
this.formatData(responseJson);
this.state = {
dataSource: ds.cloneWithRowsAndSections(dataBlob, sectionIds,
rowIds)
}
})
}
formatData(data) {
const alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('');
const dataBlob = {};
const sectionIds = [];
const rowIds = [];
for (let sectionId = 0; sectionId < alphabet.length; sectionId++) {
const currentChar = alphabet[sectionId];
const users = data.filter((user) =>
user.calle.toUpperCase().indexOf(currentChar) === 0);
if (users.length > 0) {
sectionIds.push(sectionId);
dataBlob[sectionId] = {
character: currentChar
};
rowIds.push([]);
for (let i = 0; i < users.length; i++) {
const rowId = `${sectionId}:${i}`;
rowIds[rowIds.length - 1].push(rowId);
dataBlob[rowId] = users[i];
}
}
}
return {
dataBlob,
sectionIds,
rowIds
};
}
render() {
return (
<View style={{flex: 1, paddingTop: 20}}>
<ListView
style={styles.container}
dataSource={this.state.dataSource}
renderRow={(rowData) => <Row {...rowData} />}
renderSeparator={(sectionId, rowId) => <View key={rowId} />}
style={styles.separator}
renderHeader={() => <Header />}
renderSectionHeader={(sectionData) => <SectionHeader {...sectionData} />}
/>
</View>
);
}
}
AppRegistry.registerComponent('NoTocar', () => NoTocarList);

From your example you have passed the dataSource as null to the ListView. So you need to initialize it first by using
this.state({
dataSource: {}
})
After getting the response from the Api call you need to set the dataSource state by using
this.setState({
dataSource: ds.cloneWithRowsAndSections(dataBlob, sectionIds,
rowIds)
})

The issue is that you're trying to update the state asynchronously, after a render, but are expecting the result on the first render. Another issue is that you're overwriting the state instead of updating it.
The fetch call in your constructor is async, meaning the constructor is finished and the component (along with its state) is created before that call resolves.
constructor() {
fetch('http://xxxxx.mybluemix.net/get')
// ...
.then(() => {
// ...
// this code gets called after the component is created
// this state is also overwriting already created state
this.state = {
dataSource: ds.cloneWithRowsAndSections(dataBlob, sectionIds,
rowIds)
}
})
}
Since your data is obtained asynchronously, you can add a check and show a progress indicator while its loading (you should also use setState instead of overwriting the state):
constructor() {
this.state = {
dataSource: null // initialize it explicitly
}
fetch('http://xxxxx.mybluemix.net/get')
// ...
.then(() => {
// ...
// use set state
this.setState({
dataSource: ds.cloneWithRowsAndSections(dataBlob, sectionIds,
rowIds)
})
})
}
render(){
// on initial render, while the state hasn't been fetched yet
// show the spinner
if (!this.state.dataSource) {
return <ActivityIndicator />
}
return(
<View style={{flex: 1, paddingTop: 20}}>
...
</View>
);
}