Fetching JSON and iterating through the values in react-native - javascript

I'm new to react native, and I'm trying to simply iterate through a sample json file but am receiving the error undefined is not a function (evaluating 'this.state.results.map')
I have set the state initially to be an object, so not sure why i am receiving this error.
Here is the JS:
import React, { Component } from 'react';
import { AppRegistry, ListView, Text, View, StyleSheet, TouchableHighlight } from 'react-native';
var REQUEST_URL = 'https://facebook.github.io/react-native/movies.json';
class WPReact extends Component {
constructor(props) {
super(props);
this.state = {results: []};
}
componentDidMount() {
this.fetchData();
}
fetchData() {
fetch(REQUEST_URL)
.then((response) => response.json())
.then((responseData) => {
this.setState({
results : { responseData }
});
})
.done();
}
render() {
return this.renderJSON();
}
renderJSON() {
contents = this.state.results.map((item) => {
<View key={item.movies.title} style={ styles.container }>
<Text style={styles.title}>
{item.movies.title}
</Text>
</View>
});
return (
<View style={styles.container}>
{contents}
</View>
);
}
}
var Dimensions = require('Dimensions');
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#FFFFFF',
},
textContainer: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
title: {
fontSize: 30,
textAlign: 'center',
margin: 10,
},
text: {
fontSize: 18,
paddingLeft: 20,
paddingRight: 20,
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
// App registration and rendering
AppRegistry.registerComponent('AwesomeProject', () => WPReact);
EDIT
So i have edited the renderJSON() to and also removed the braces of responseData as you said, as it was already an object:
renderJSON() {
console.log(this.state.results.description);
contents = this.state.results.movies.map((item) => {
<View key={item.title} style={ styles.container }>
<Text style={styles.title}>
{item.title}
</Text>
</View>
});
return (
<View style={styles.container}>
{contents}
</View>
);
}
I added a console log to see if i can output some of the data, and i can see the description. The sample JSON i am using is (demo from react):
{
"title": "The Basics - Networking",
"description": "Your app fetched this from a remote endpoint!",
"movies": [
{ "title": "Star Wars", "releaseYear": "1977"},
{ "title": "Back to the Future", "releaseYear": "1985"},
{ "title": "The Matrix", "releaseYear": "1999"},
{ "title": "Inception", "releaseYear": "2010"},
{ "title": "Interstellar", "releaseYear": "2014"}
]
}
I can log the description and title. But I am still receiving: ReactNativeJS: undefined is not an object (evaluating 'this.state.results.movies.map')
And if I try logging console.log(this.state.results.movies[0].title) I am receiving undefined is not an object (evaluating 'this.state.results.movies[0]')
fetchData() {
fetch(REQUEST_URL)
.then((response) => response.json())
.then((responseData) => {
console.log(responseData);
this.setState({
results : responseData
});
})
.done();
}
console.log(responseData) shows:
03-29 13:49:53.028 3062 4143 I ReactNativeJS: { title: 'The Basics - Networking',
03-29 13:49:53.028 3062 4143 I ReactNativeJS: description: 'Your app fetched this from a remote endpoint!',
03-29 13:49:53.028 3062 4143 I ReactNativeJS: movies:
03-29 13:49:53.028 3062 4143 I ReactNativeJS: [ { title: 'Star Wars', releaseYear: '1977' },
03-29 13:49:53.028 3062 4143 I ReactNativeJS: { title: 'Back to the Future', releaseYear: '1985' },
03-29 13:49:53.028 3062 4143 I ReactNativeJS: { title: 'The Matrix', releaseYear: '1999' },
03-29 13:49:53.028 3062 4143 I ReactNativeJS: { title: 'Inception', releaseYear: '2010' },
03-29 13:49:53.028 3062 4143 I ReactNativeJS: { title: 'Interstellar', releaseYear: '2014' } ] }
console.log(this.state.results.movies);
03-29 14:18:05.483 3062 4726 I ReactNativeJS: undefined
03-29 14:18:05.510 3062 4726 I ReactNativeJS: [ { title: 'Star Wars', releaseYear: '1977' },
03-29 14:18:05.510 3062 4726 I ReactNativeJS: { title: 'Back to the Future', releaseYear: '1985' },
03-29 14:18:05.510 3062 4726 I ReactNativeJS: { title: 'The Matrix', releaseYear: '1999' },
03-29 14:18:05.510 3062 4726 I ReactNativeJS: { title: 'Inception', releaseYear: '2010' },
03-29 14:18:05.510 3062 4726 I ReactNativeJS: { title: 'Interstellar', releaseYear: '2014' } ]


I see a couple of things you need to change.
Firstly, you need to bind fetchData method when you are using ES6 doing this this.fetchData = this.fetchData.bind(this); in the constructor (look for other ways to do this).
Secondly, map should be applied to this.state.results.movies due this is the array (following your post). this.state.results is not an array, is an object containing an array.
import React, { Component } from 'react';
import { AppRegistry, ListView, Text, View, StyleSheet, TouchableHighlight } from 'react-native';
var REQUEST_URL = 'https://facebook.github.io/react-native/movies.json';
class WPReact extends Component {
constructor(props) {
super(props);
this.state = {
//Lets initialize results with the same struct we expect to receive from the api
results: {
title: '',
description: '',
movies: []
}
};
//Using ES6 we need to bind methods to access 'this'
this.fetchData = this.fetchData.bind(this);
}
componentDidMount() {
this.fetchData();
}
fetchData() {
fetch(REQUEST_URL)
.then((response) => response.json())
.then((responseData) => {
this.setState({
results: responseData
});
})
.done();
}
render() {
//this.state.results.movies is the array you have to iterate
contents = this.state.results.movies.map((item) => {
//We need to return the corresponding mapping for each item too.
return (
<View key={item.title} style={ styles.container }>
<Text style={styles.title}>
{item.title}
</Text>
</View>
);
});
return (
<View style={styles.container}>
{contents}
</View>
);
}
}
var Dimensions = require('Dimensions');
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#FFFFFF',
},
textContainer: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
title: {
fontSize: 30,
textAlign: 'center',
margin: 10,
},
text: {
fontSize: 18,
paddingLeft: 20,
paddingRight: 20,
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
// App registration and rendering
AppRegistry.registerComponent('AwesomeProject', () => WPReact);
Let me know if its works, I havent tested yet but I will soon.


React components using ES6 classes don't autobind this to non React methods. In your constructor, add:
this.renderJSON = this.renderJSON.bind(this)


responseData has to be an array for the Array#map() method to be available as a method on it.
You are setting results to an object containing the value of your responseData:
this.setState({
results : { responseData } // Object literal notation albeit possibly incorrect depending on the value of responseData
});
Remove surrounding braces if you are sure responseData is an array:
this.setState({
results : JSON.parse(responseData);
// You'll want to parse your JSON data here too :)
// If responseData is an array, you'll be able to call .map on it
});
// this.state.results.movies.map should now work
// (given the structure of the expected JSON)

Related

React Native (View config getter callback for component `input` must be a function (received `undefined`). Make sure to start component names with)

There was a gap. I have an application being developed for testing.
Error:View config getter callback for component input must be a function (received undefined). Make sure to start component names with a capital letter.
I have 3 files, data.js(here I take information on the test (all sorts of initial data) ), testMath.js(this file brings it all together ) , Questions.js(and in this there is an interaction with data )
Help, I need somebody))
data.js:
export const data = {
testName:"TestName",
questions:[
{
title:"question?",
code: "___ d = 123;",
variants : [
{title: "const", "flag": true},
{title: "var"},
{title: "let"}
]
},
{
title:"question?",
code: "let с;",
variants : [
{title: "undefined", "flag": true},
{title: "null"},
{title: "number"}
]
},
{
title:"question",
code: "",
variants : [
{title: "вариант1", "flag": true},
{title: "вариант2", "flag": true},
{title: "вариант3"}
]
},{
title:"question",
code: "",
variants : [
{"text": "1", "flag": "const"}
]
}
]
}
export default data
testMath.js
import { ReactDOM } from 'react';
import { StyleSheet, View, Text, Image } from 'react-native';
import { gStyle } from '../styles/style';
import { data } from './data'
import Questions from './Questions'
export default function testMath() {
return (
<View style={gStyle.main}>
<Text style={styles.h1}>Hello! </Text>
<Questions data={data} />
</View>
);
}
const styles = StyleSheet.create({
h1: {
textAlign: 'center',
fontSize: 24,
fontFamily: 'Oswald-Bold',
}
});
Questions.js:
import { View, Text, StyleSheet } from 'react-native';
import {input} from "react-native-web";
export default function Questions({ data }) {
let questions = data.questions
questions = questions.map(function(el, index){
let j = 0
let variants = el.variants.map(function(e, i) {
j++
return (
<View>
<input type="checkbox" id={'id' + j} />
<label for={'id' + j}> {el.title}</label>
</View>
)
})
return (
<View>
<Text style={styles.questionHead}> {el.title} </Text>
<Text style={styles.questionExample}>{el.code} </Text>
{variants}
</View>
)
})
return (
<View>
<Text style={styles.testTeme}>
{data.testName}
</Text>
{questions}
</View>
)
}
const styles = StyleSheet.create({
testTeme: {
textAlign: 'center',
paddingTop: 15,
fontFamily: 'Oswald-Bold',
fontSize: 25,
},
questionHead: {
textAlign: 'center',
paddingTop: 15,
fontFamily: 'Oswald-Bold',
fontSize: 20,
},
questionExample: {
paddingTop: 10,
fontSize: 18,
textAlign: 'center',
fontFamily: 'Oswald-light',
},
})```

You're using HTML elements inside Questions.js:
<input type="checkbox" id={'id' + j} />
<label for={'id' + j}> {el.title}</label>
Read more about react-native TextInput

Unable to render array of objects in react-native

I have array of objects in React-Native that look like this in console
[{
"isDonor": true,
"name": "Nadi",
"photo": "https://gre",
"uid": "2ZE"
}, {
"email": "mmaz",
"isDonor": true,
"name": "Mz",
"photo": "https://gra",
"uid": "Cb"
}]
but when i render it i get notthing on screen here is code
{donorsData.map((v, i) => {return <Text key={i}>{v.name}</Text>;})}
I'm trying to render each object on screen with it's properties

Looks perfect, it should render the data without any problem, but still here is the full working example:
Working App: Expo Snack
import * as React from 'react';
import { Text, View, StyleSheet, Image } from 'react-native';
import Constants from 'expo-constants';
const donorsData = [
{
isDonor: true,
name: 'Nadi',
photo: 'https://i.stack.imgur.com/t8vJf.jpg?s=328&g=1',
uid: '2ZE',
email: 'nadi#test.com',
},
{
email: 'mz#test.com',
isDonor: true,
name: 'Mz',
photo: 'https://i.stack.imgur.com/t8vJf.jpg?s=328&g=1',
uid: 'Cb',
},
];
export default function App() {
return (
<View style={styles.container}>
{donorsData.map((v, i) => {
return (
<View
key={v.uid}
style={{
backgroundColor: 'white',
padding: 10,
margin: 5,
borderRadius: 10,
}}>
<Text>{v.name}</Text>
<Text>{v.email}</Text>
<Image source={{ uri: v.photo }} style={{ height: 150, flex: 1 }} />
</View>
);
})}
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
padding: 8,
},
});

You can wrap your required data into View and give style to it.
return (
<View style={styles.container}>
{donorsData.map((v, i) => {
return <View>
<Text key={i}>{v.name}</Text>
</View>;
})}
);

SOLVED: Have json object fed into function but unable to get its data?

I'm trying to feed an object (comment) into a function to return a render, but for some reason, I can't get the data from the object put in, even though I know it's not empty. When I do console.log("renderAuthorName comment: " + JSON.stringify(comment)); it prints out the whole comment object:
renderAuthorName comment: {"item":{"id":6,"comment_object_type":4,"comment_object_id":8,"comment_author":1,"comment_author_name":"Nickname","comment_author_avatar":"default_avatar.png","comment_ts":"2020-06-08T01:19:04.000+0000","comment_content":"First comment here","comment_parent":0,"comment_parent_author":0,"comment_parent_author_name":null},"index":2,"separators":{}}
But when I do console.log("comment author name: " + comment.comment_author_name); on the line right after, I get
comment author name: undefined
Why is it doing this? I'm unable to print the string from the JSON!!! It makes no sense!
The function in question is "renderAuthorName(comment)". Also, the render() prints out
this.props.comment: {"item":{"id":6,"comment_object_type":4,"comment_object_id":8,"comment_author":1,"comment_author_name":"Nickname","comment_author_avatar":"default_avatar.png","comment_ts":"2020-06-08T01:19:04.000+0000","comment_content":"First comment here","comment_parent":0,"comment_parent_author":0,"comment_parent_author_name":null},"index":2,"separators":{}}
The undefined author is causing the comment cell to just print out blank lines, and not any text, which is the problem. I need it to print out the comment content.
This is the full CommentCell code that's having problems:
'use strict';
import React, { Component } from 'react';
import {
Platform,
StyleSheet,
Text,
Image,
View,
Modal,
TouchableOpacity,
TouchableHighlight,
TouchableNativeFeedback,
} from 'react-native';
import { connect } from 'react-redux';
import LoginPage from '../LoginPage';
import {showLoginPage, isLogin} from '../actions/loginAction';
import URLConf from '../api/URLConf';
import {getToken} from '../util/Secret';
import Md5 from '../util/Md5';
const avatar_thumbnail = '?imageView2/1/w/48/h/48';
class CommentCell extends Component{
constructor(props) {
super(props);
this.state = {
loginRegPageVisible: false,
};
}
onPress() {
const {status,showLoginPage} = this.props;
if(status == 'NOT_LOGGED_IN') {
showLoginPage();
return;
}
this.props.reply(this.props.comment);
}
renderAuthorName(comment) {
console.log("renderAuthorName comment: " + JSON.stringify(comment));
console.log("comment author name: " + comment.comment_author_name);
console.log("comment props author name: " + this.props.comment.comment_author_name);
//console.log("test: " + test);
if(comment.comment_parent_author_name != undefined && comment.comment_parent_author_name != null) {
console.log("renderAuthorName:1 ");
return (<View style={{flex: 1, flexDirection: 'row'}}>
<Text style={styles.username}>{comment.comment_author_name}</Text>
<Text style={{fontSize: 14, color: '#9B9B9B', bottom: 1}}> Reply </Text>
<Text style={styles.username}>{comment.comment_parent_author_name}</Text>
</View>
);
} else {
console.log("renderAuthorName:2 ");
return (<Text style={styles.username}>{comment.comment_author_name}</Text>);
}
}
render(){
const {status} = this.props;
console.log("this.props.comment: " + JSON.stringify(this.props.comment));
return (
<View >
{status == 'NOT_LOGGED_IN' && <LoginPage {...this.props}/>}
<TouchableOpacity onPress={()=>this.onPress()}>
<View style={styles.commentBox}>
{/* <Image style={styles.avatar} source={{uri:URLConf.IMG_BASE_URL+this.props.comment.comment_author_avatar+avatar_thumbnail}} /> */}
<Image style={styles.avatar} source={require("../imgs/default-avatar.jpg")} />
<View style={{flex:1,borderColor: 'red', borderWidth: 1}}>
{this.renderAuthorName(this.props.comment)}
{/* <Text style={styles.comment}>{this.props.comment.comment_content}</Text> */}
<Text style={styles.comment}>Test comment style</Text>
</View>
</View>
</TouchableOpacity>
</View>
);
}
}
var styles = StyleSheet.create({
commentBox: {
height: 100,
flex: 1,
flexDirection: 'row',
borderColor: 'black',
borderWidth: 1,
padding: 10,
paddingBottom: 4,
},
avatar: {
borderRadius: 16,
width: 32,
height: 32,
marginRight: 10,
},
username: {
fontSize: 14,
fontWeight: 'bold',
color: 'black',
// lineHeight: 13,
marginBottom: 4,
},
commentTime: {
},
comment: {
fontSize: 14,
//color: 'black',
color: '#030303',
lineHeight: 18,
},
});
export default connect((state) => ({
status: state.isLogin.status, //登录状态
loginPageVisible: state.showLoginPage.loginPageVisible
}), (dispatch) => ({
isLogin: () => dispatch(isLogin()),
showLoginPage: () => dispatch(showLoginPage()),
}))(CommentCell)
This is the CommentList which calls CommentCell and gives it the data:
'use strict';
import React, { Component } from 'react';
import {
FlatList,
//ListView,
Platform,
StyleSheet,
Text,
Image,
View,
TouchableOpacity,
TouchableHighlight,
TouchableNativeFeedback,
} from 'react-native';
import PoplarEnv from '../util/PoplarEnv';
import CommentCell from './CommentCell';
import {getCommentsOfObject} from '../api/CommentAPI';
import URLConf from '../api/URLConf';
const avatar_thumbnail = '?imageView2/1/w/48/h/48';
export default class CommentList extends Component{
constructor(props) {
super(props);
this.state = {
// dataSource: new ListView.DataSource({
// rowHasChanged: (row1, row2) => row1 !== row2,
// }),
dataSource: [],
loaded: false,
replyModalVisible: false,
commentsArray: [],
commentCounter: this.props.commentCounter,
commented: this.props.commented,
limit: this.props.limit, //评论显示行数
comment: null,
commentBarVisible: false,
};
}
componentDidMount() {
this.fetchData();
}
/*
被评论的feed类型
*/
getCommentObjType(type) {
var type_str = '';
switch (type) {
case PoplarEnv.COMMENT_OBJ_TYPE.POST:
type_str = 'post';
break;
case PoplarEnv.COMMENT_OBJ_TYPE.PHOTO:
type_str = 'photo';
break;
case PoplarEnv.COMMENT_OBJ_TYPE.ALBUM:
type_str = 'album';
break;
case PoplarEnv.COMMENT_OBJ_TYPE.SPOST:
type_str = 'spost';
break;
default:
type_str = '';
}
return type_str;
}
fetchData() {
var type_str = this.getCommentObjType(this.props.object_type);
getCommentsOfObject(type_str, this.props.object_id,this.state.limit, (result, comments) => {
this.setState({
commentsArray: comments,
// dataSource: this.state.dataSource.cloneWithRows(comments),
dataSource: comments,
loaded: true,
});
});
}
renderLoadingView() {
return (
<View style={styles.container}>
<Text>
Loading...
</Text>
</View>
);
}
setReplyModalVisible() {
this.setState({replyModalVisible: true});
}
setReplyModalInVisible() {
this.setState({replyModalVisible: false});
}
addNewComment(comment) {
console.log('add new comment to comments list');
console.log(comment);
var commentsArray = this.state.commentsArray;
commentsArray.push(comment);
this.setState({
// dataSource: this.state.dataSource.cloneWithRows(commentsArray),
dataSource: commentsArray,
});
}
componentWillReceiveProps(nextProps) {
if(this.props.commentCounter == nextProps.commentCounter) return;
if(nextProps.newComment != undefined && nextProps.newComment != null) {
this.addNewComment(nextProps.newComment);
}
}
render() {
if(!this.state.loaded) {
return this.renderLoadingView();
}
return this.renderCommentList(this.props.commentCounter);
}
showCommentBar() {
this.setState({
commentBarVisible: true,
});
}
hideCommentBar() {
this.setState({
isComment: false,
commentBarVisible: false,
});
}
renderCommentList(commentCounter) {
//console.log("dataSource 0:" + JSON.stringify(this.state.dataSource[0])); correct!
if(commentCounter > 0) {
console.log("commentCounter >0");
return (
<View>
<TouchableOpacity style={styles.commentList} onPress={this.props.nav2FeedDetail}>
<FlatList
data={this.state.dataSource}
extraData={this.state}
renderItem={(comment)=>this.renderRow(comment, this.props.caller)}
/>
</TouchableOpacity>
</View>
);
} else {
return (<View/>);
}
}
renderAuthorName(comment) {
if(comment.comment_parent_author_name != undefined && comment.comment_parent_author_name != null) {
return (<View style={{flex: 1, flexDirection: 'row'}}>
<Text style={styles.username}>{comment.comment_author_name}</Text>
<Text style={{fontSize: 14, color: '#9B9B9B', bottom: 1}}> Reply </Text>
<Text style={styles.username}>{comment.comment_parent_author_name}</Text>
</View>
);
} else {
return (<Text style={styles.username}>{comment.comment_author_name}</Text>);
}
}
renderRow(comment, caller) {
//console.log("renderrow json: " +JSON.stringify(comment));
//console.log("renderdor com:" +comment);
//console.log("caller:" + caller);
if(comment == null || comment == undefined) {
return (<View />);
} else {
if(caller == 'FeedCell') {
return(
<View style={styles.commentBox}>
<Image style={styles.avatar} source={{uri:URLConf.IMG_BASE_URL+comment.comment_author_avatar+avatar_thumbnail}} />
<View style={{flex:1}}>
{this.renderAuthorName(comment)}
<Text style={styles.comment}>{comment.comment_content}</Text>
</View>
</View>
);
} else if(caller == 'FeedDetail') {
console.log(JSON.stringify(comment));
return(
<CommentCell comment={comment} reply={this.props.reply}/>
);
}
}
}
};
var styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'white',
},
commentList: {
borderColor: 'red', borderWidth: 1,
//flex:1,
marginTop: -10,
marginLeft:8,
marginRight:8,
paddingTop: 0,
},
commentBox: {
flex: 1,
flexDirection: 'row',
//borderColor: 'black',
//borderWidth: 1,
padding: 10,
paddingBottom: 4,
},
avatar: {
borderRadius: 16,
width: 32,
height: 32,
marginRight: 10,
},
username: {
fontSize: 14,
fontWeight: 'bold',
color: 'black',
// lineHeight: 13,
marginBottom: 4,
},
commentTime: {
},
comment: {
fontSize: 14,
color: '#030303',
lineHeight: 18,
},
});
module.exports = CommentList;
Full console output:
[Mon Jun 08 2020 20:04:41.558] LOG this.props.comment: {"item":{"id":6,"comment_object_type":4,"comment_object_id":8,"comment_author":1,"comment_author_name":"Nickname","comment_author_avatar":"default_avatar.png","comment_ts":"2020-06-08T01:19:04.000+0000","comment_content":"First comment here","comment_parent":0,"comment_parent_author":0,"comment_parent_author_name":null},"index":2,"separators":{}}
[Mon Jun 08 2020 20:04:41.558] LOG renderAuthorName comment: {"item":{"id":6,"comment_object_type":4,"comment_object_id":8,"comment_author":1,"comment_author_name":"Nickname","comment_author_avatar":"default_avatar.png","comment_ts":"2020-06-08T01:19:04.000+0000","comment_content":"First comment here","comment_parent":0,"comment_parent_author":0,"comment_parent_author_name":null},"index":2,"separators":{}}
[Mon Jun 08 2020 20:04:41.559] LOG comment author name: undefined
[Mon Jun 08 2020 20:04:41.559] LOG comment props author name: undefined
[Mon Jun 08 2020 20:04:41.560] LOG renderAuthorName:2
Please let me know why it's doing this? And how to fix it so I can display the text I want?

I fixed it. I needed comment.item.comment_author_name instead of just comment.comment_author_name
Thank you Chris G

To elaborate a bit, you have this comment object shape:
comment = {
"item": {
"id": 6,
"comment_object_type": 4,
"comment_object_id": 8,
"comment_author": 1,
"comment_author_name": "Nickname",
"comment_author_avatar": "default_avatar.png",
"comment_ts": "2020-06-08T01:19:04.000+0000",
"comment_content": "First comment here",
"comment_parent": 0,
"comment_parent_author": 0,
"comment_parent_author_name": null
},
"index": 2,
"separators": {}
}
So you can see that most of your comment props (like comment_author_name is inside the nested item object). So just do comment.item.comment_author_name, etc, etc.

How to change different color of each list item in FlatList react-native

Here I am populating the JSON value on Flatlist and its working fine ,but now I have to change the color of each list , like in JSON value there is field "criLevel" when its value is 1 it should be normal , if 3 then yellow and 4 then red . So please help me ,how can I do that using if else inside return not working .Please help
import React, { Component } from 'react';
import { View, Text, TextInput,
FooterTab,Button,TouchableOpacity, ScrollView, StyleSheet,
ActivityIndicator ,Header,FlatList} from 'react-native';
import {Icon} from 'native-base';
import { createStackNavigator } from 'react-navigation';
import { SearchBar } from 'react-native-elements';
export default class Issueviewlist extends Component {
static navigationOptions = {
title: 'Selected Item',
header: null,
};
constructor() {
super();
this.state = {
data: null,
loading: true,
search: '',
};
}
componentDidMount() {
this.createViewGroup();
}
createViewGroup = async () => {
try {
const response = await fetch(
'http:///Dsenze/userapi/issue/viewissue',
{
method: 'POST',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({
"password": 'admin',
"username": 'admin',
"startlimit":"0",
"valuelimit":"10",
}),
}
);
const responseJson = await response.json();
const { issueData } = responseJson;
this.setState({
data: issueData,
loading: false,
});
} catch (e) {
console.error(e);
}
};
updateSearch = search => {
this.setState({ search });
};
keyExtractor = ({ id }) => id.toString();
keyExtractor = ({ desc }) => desc.toString();
renderItem = ({ item }) => (
<TouchableOpacity
style={styles.item}
activeOpacity={0.4}
onPress={() => {
this.clickedItemText(item);
}}>
<Text style={styles.buttonText}>Id {item.id}</Text>
<Text>Hospital Name {item.desc}</Text>
<Text>User {item.initiatedBy}</Text>
<Text>Date {item.dateTime}</Text>
</TouchableOpacity>
);
render() {
const { loading, data } = this.state;
return (
<ScrollView>
<View style={styles.container1}>
{this.state.loading ? (
<ActivityIndicator size="large" />
) :
(
<FlatList
data={data}
renderItem={this.renderItem}
keyExtractor={this.keyExtractor}
/>
)}
</View>
</ScrollView>
);
}
}
const styles = StyleSheet.create(
{
container1:
{
flex: 1,
justifyContent: 'center',
alignItems: 'center'
},
ListContainer :{
borderColor: '#48BBEC',
backgroundColor: '#000000',
color:'red',
alignSelf: 'stretch' ,
},
container2:
{
flex: 1,
justifyContent: 'center',
alignItems: 'center',
paddingHorizontal: 15
},
inputBox:{
width:300,
borderColor: '#48BBEC',
backgroundColor: '#F8F8FF',
borderRadius:25,
paddingHorizontal:16,
fontSize:16,
color:'#000000',
marginVertical:10,
},
button:{
width:300,
backgroundColor:'#4169E1',
borderRadius:25,
marginVertical:10,
paddingVertical:16
},
buttonText:{
fontSize:16,
fontWeight:'500',
color:'#ffffff',
textAlign:'center'
},
item:
{
padding: 15
},
text:
{
fontSize: 18
},
button:{
width:300,
backgroundColor:'#4169E1',
borderRadius:25,
marginVertical:10,
paddingVertical:16
},
buttonText:{
fontSize:16,
fontWeight:'500',
color:'red',
textAlign:'center'
},
separator:
{
height: 2,
backgroundColor: 'rgba(0,0,0,0.5)'
}
});
// Below is JSON Response
{
"issueData": [{
"criLevel": 1,
"dateTime": "2018-12-24Z",
"desc": "111",
"id": 1,
"initiatedBy": "1",
"invId": 1,
"issueTypeId": 4,
"statusId": 1
}, {
"criLevel": 1,
"dateTime": "2018-12-24Z",
"desc": "222",
"id": 2,
"initiatedBy": "1",
"invId": 1,
"issueTypeId": 4,
"statusId": 1
}, {
"criLevel": 3,
"dateTime": "2018-12-24Z",
"desc": "222",
"id": 3,
"initiatedBy": "1",
"invId": 1,
"issueTypeId": 4,
"statusId": 1
}, {
"criLevel": 4,
"dateTime": "2018-12-24Z",
"desc": "222",
"id": 4,
"initiatedBy": "1",
"invId": 1,
"issueTypeId": 4,
"statusId": 1
}],
"success": "true"
}
Thanks

You can change the item style depending on the "criLevel"
renderItem = ({ item }) => (
<TouchableOpacity
style={[styles.item, {color: getColor(item)}}
activeOpacity={0.4}
onPress={() => {
this.clickedItemText(item);
}}>
<Text style={styles.buttonText}>Id {item.id}</Text>
<Text>Hospital Name {item.desc}</Text>
<Text>User {item.initiatedBy}</Text>
<Text>Date {item.dateTime}</Text>
</TouchableOpacity>
);
getColor = (item) => {
switch(item.criLevel) {
case 3:
return "yellow"
....
}
}

How to populate Picker with languages in react native?

I have an array of all languages. I want to populate picker with all the languages but I get an error msg.
This is my code. It looks like the offending code is {this.state.isoLangs.map((item, index) => {
return <Picker.Item key={index} label={item.name} value={item.nativeName} />
})}
import React from 'react';
import {Image, Picker, StyleSheet, Text, TouchableHighlight, View} from 'react-native';
import {StackNavigator} from 'react-navigation'; // Version can be specified in package.json
import {Constants} from 'expo';
class HomeScreen extends React.Component {
render() {
return (
<View style={styles.container}>
<View style={styles.section1}>
<Text style={[styles.text, {paddingBottom: 20}]}>{'Welcome'}</Text>
</View>
<View style={styles.section2}>
<Text style={[styles.text, {paddingTop: 20}]}>{'Your verification was successful'}</Text>
</View>
<View style={styles.section3}>
<Text style={styles.text}>{'Sign up as:'}</Text>
</View>
<View style={styles.section4}>
<View style={styles.buttonContainer}>
<View style={styles.button}>
<TouchableHighlight onPress={() => this.props.navigation.navigate('Details')}>
<Image source={require('./assets/stck2.png')} style={styles.image}/>
</TouchableHighlight>
<TouchableHighlight onPress={() => this.props.navigation.navigate('Details')}>
<Text style={styles.buttonText}>{'Translator'}</Text>
</TouchableHighlight>
</View>
<View style={styles.button}>
<TouchableHighlight onPress={() => this.props.navigation.navigate('Recruiter')}>
<Image source={require('./assets/stck1.png')} style={styles.image}/>
</TouchableHighlight>
<TouchableHighlight onPress={() => this.props.navigation.navigate('Recruiter')}>
<Text style={styles.buttonText}>{'Recruiter'}</Text>
</TouchableHighlight>
</View>
</View>
</View>
</View>
);
}
}
class DetailsScreen extends React.Component {
state = {user: '',
isoLangs : {
"ab":{
"name":"Abkhaz",
"nativeName":"аҧсуа"
},
"aa":{
"name":"Afar",
"nativeName":"Afaraf"
},
"af":{
"name":"Afrikaans",
"nativeName":"Afrikaans"
},
"ak":{
"name":"Akan",
"nativeName":"Akan"
},
"sq":{
"name":"Albanian",
"nativeName":"Shqip"
},
"am":{
"name":"Amharic",
"nativeName":"አማርኛ"
},
"ar":{
"name":"Arabic",
"nativeName":"العربية"
},
"an":{
"name":"Aragonese",
"nativeName":"Aragonés"
},
"hy":{
"name":"Armenian",
"nativeName":"Հայերեն"
},
"as":{
"name":"Assamese",
"nativeName":"অসমীয়া"
},
"av":{
"name":"Avaric",
"nativeName":"авар мацӀ, магӀарул мацӀ"
},
"ae":{
"name":"Avestan",
"nativeName":"avesta"
},
"ay":{
"name":"Aymara",
"nativeName":"aymar aru"
},
"az":{
"name":"Azerbaijani",
"nativeName":"azərbaycan dili"
},
"bm":{
"name":"Bambara",
"nativeName":"bamanankan"
},
"ba":{
"name":"Bashkir",
"nativeName":"башҡорт теле"
},
"eu":{
"name":"Basque",
"nativeName":"euskara, euskera"
},
"be":{
"name":"Belarusian",
"nativeName":"Беларуская"
},
"bn":{
"name":"Bengali",
"nativeName":"বাংলা"
},
"bh":{
"name":"Bihari",
"nativeName":"भोजपुरी"
},
"bi":{
"name":"Bislama",
"nativeName":"Bislama"
},
"bs":{
"name":"Bosnian",
"nativeName":"bosanski jezik"
},
"br":{
"name":"Breton",
"nativeName":"brezhoneg"
},
"bg":{
"name":"Bulgarian",
"nativeName":"български език"
},
"my":{
"name":"Burmese",
"nativeName":"ဗမာစာ"
},
"ca":{
"name":"Catalan; Valencian",
"nativeName":"Català"
},
"ch":{
"name":"Chamorro",
"nativeName":"Chamoru"
},
"ce":{
"name":"Chechen",
"nativeName":"нохчийн мотт"
},
"ny":{
"name":"Chichewa; Chewa; Nyanja",
"nativeName":"chiCheŵa, chinyanja"
},
"zh":{
"name":"Chinese",
"nativeName":"中文 (Zhōngwén), 汉语, 漢語"
},
"cv":{
"name":"Chuvash",
"nativeName":"чӑваш чӗлхи"
},
"kw":{
"name":"Cornish",
"nativeName":"Kernewek"
},
"co":{
"name":"Corsican",
"nativeName":"corsu, lingua corsa"
},
"cr":{
"name":"Cree",
"nativeName":"ᓀᐦᐃᔭᐍᐏᐣ"
},
"hr":{
"name":"Croatian",
"nativeName":"hrvatski"
},
"cs":{
"name":"Czech",
"nativeName":"česky, čeština"
},
"da":{
"name":"Danish",
"nativeName":"dansk"
},
"dv":{
"name":"Divehi; Dhivehi; Maldivian;",
"nativeName":"ދިވެހި"
},
"nl":{
"name":"Dutch",
"nativeName":"Nederlands, Vlaams"
},
"en":{
"name":"English",
"nativeName":"English"
},
"eo":{
"name":"Esperanto",
"nativeName":"Esperanto"
},
"et":{
"name":"Estonian",
"nativeName":"eesti, eesti keel"
},
"ee":{
"name":"Ewe",
"nativeName":"Eʋegbe"
},
"fo":{
"name":"Faroese",
"nativeName":"føroyskt"
},
"fj":{
"name":"Fijian",
"nativeName":"vosa Vakaviti"
},
"fi":{
"name":"Finnish",
"nativeName":"suomi, suomen kieli"
},
"fr":{
"name":"French",
"nativeName":"français, langue française"
},
"ff":{
"name":"Fula; Fulah; Pulaar; Pular",
"nativeName":"Fulfulde, Pulaar, Pular"
},
"gl":{
"name":"Galician",
"nativeName":"Galego"
},
"ka":{
"name":"Georgian",
"nativeName":"ქართული"
},
"de":{
"name":"German",
"nativeName":"Deutsch"
},
"el":{
"name":"Greek, Modern",
"nativeName":"Ελληνικά"
},
"gn":{
"name":"Guaraní",
"nativeName":"Avañeẽ"
},
"gu":{
"name":"Gujarati",
"nativeName":"ગુજરાતી"
},
"ht":{
"name":"Haitian; Haitian Creole",
"nativeName":"Kreyòl ayisyen"
},
"ha":{
"name":"Hausa",
"nativeName":"Hausa, هَوُسَ"
},
"he":{
"name":"Hebrew (modern)",
"nativeName":"עברית"
},
"hz":{
"name":"Herero",
"nativeName":"Otjiherero"
},
"hi":{
"name":"Hindi",
"nativeName":"हिन्दी, हिंदी"
},
"ho":{
"name":"Hiri Motu",
"nativeName":"Hiri Motu"
},
"hu":{
"name":"Hungarian",
"nativeName":"Magyar"
},
"ia":{
"name":"Interlingua",
"nativeName":"Interlingua"
},
"id":{
"name":"Indonesian",
"nativeName":"Bahasa Indonesia"
},
"ie":{
"name":"Interlingue",
"nativeName":"Originally called Occidental; then Interlingue after WWII"
},
"ga":{
"name":"Irish",
"nativeName":"Gaeilge"
},
...
"yi":{
"name":"Yiddish",
"nativeName":"ייִדיש"
},
"yo":{
"name":"Yoruba",
"nativeName":"Yorùbá"
},
"za":{
"name":"Zhuang, Chuang",
"nativeName":"Saɯ cueŋƅ, Saw cuengh"
}
}};
getLanguageName = function(key) {
key = key.slice(0,2);
lang = this.state.isoLangs[key];
return lang ? lang.name : undefined;
};
getLanguageNativeName = function(key) {
key = key.slice(0,2);
lang = this.state.isoLangs[key];
return lang ? lang.nativeName : undefined;
};
render() {
return (
<View style={{flex: 1, justifyContent: 'center'}}>
<View style={{flexDirection: 'row', justifyContent: 'center'}}>
<Text style={{
fontSize: 20,
fontFamily: 'normal',
color: 'skyblue',
}}>
Which languages do you translate?
</Text>
</View>
<View style={{flexDirection: 'row', justifyContent: 'center'}}>
<Picker style={{width: 150}}
selectedValue={this.state.language}
onValueChange={(itemValue, itemIndex) => this.setState({language: itemValue})}>
<Picker.Item label={this.getLanguageName('sv')} value="java"/>
<Picker.Item label="JavaScript" value="js"/>
{this.state.isoLangs.map((item, index) => {
return <Picker.Item key={index} label={item.name} value={item.nativeName} />
})}
</Picker>
<Image
source={require('./assets/Arrow.png')}
/>
<Picker style={{width: 150}}
selectedValue={this.state.language}
onValueChange={(itemValue, itemIndex) => this.setState({language: itemValue})}>
<Picker.Item label="Arabic" value="java"/>
<Picker.Item label="JavaScript" value="js"/>
</Picker>
</View>
<TouchableHighlight onPress={() => this.props.navigation.navigate('Details')}>
<Text style={{
fontSize: 20,
fontFamily: 'normal',
color: 'skyblue',
}}>+ add language</Text>
</TouchableHighlight>
<View style={{flexDirection: 'row', justifyContent: 'center'}}>
<TouchableHighlight onPress={() => this.props.navigation.navigate('Screen3')}>
<Image
source={require('./assets/Next.png')}
/>
</TouchableHighlight>
</View>
</View>
);
}
}
const RootStack = StackNavigator(
{
Home: {
screen: HomeScreen,
},
Details: {
screen: DetailsScreen,
},
},
{
initialRouteName: 'Home',
}
);
export default class App extends React.Component {
render() {
return <RootStack/>;
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
paddingTop: Constants.statusBarHeight,
backgroundColor: '#fff',
},
section1: {
flex: 0.17,
justifyContent: 'flex-end',
alignItems: 'center'
},
section2: {
flex: 0.30,
justifyContent: 'flex-start',
alignItems: 'center'
},
section3: {
flex: 0.10,
justifyContent: 'center',
alignItems: 'center'
},
section4: {
flex: 0.43
},
text: {
fontSize: 24,
color: '#53a6db',
textAlign: 'center',
paddingTop: 40,
paddingBottom: 40,
paddingLeft: 40,
paddingRight: 40
},
buttonContainer: {
flex: 1,
flexDirection: 'row'
},
button: {
flex: 0.5,
justifyContent: 'center',
alignItems: 'center'
},
buttonText: {
fontSize: 24,
color: '#53a6db',
textAlign: 'center',
paddingTop: 5,
paddingBottom: 5,
paddingLeft: 5,
paddingRight: 5
},
image: {
width: 100,
height: 100
}
});
The error message is:
TypeError: undefined is not a function (evaluating 'this.state.isoLangs.map')
This error is located at:
in DetailsScreen (at SceneView.js:17)
in SceneView (at CardStack.js:455)
in RCTView (at View.js:71)
in View (at CardStack.js:454)
in RCTView (at View.js:71)
in View (at CardStack.js:453)
in RCTView (at View.js:71)
in View (at createAnimatedComponent.js:147)
in AnimatedComponent (at Card.js:12)
in Card (at PointerEventsContainer.js:39)
in Container (at CardStack.js:498)
in RCTView (at View.js:71)
in View (at CardStack.js:414)
in RCTView (at View.js:71)
in View (at CardStack.js:413)
in CardStack (at CardStackTransitioner.js:67)
in RCTView (at View.js:71)
in View (at Transitioner.js:142)
in Transitioner (at CardStackTransitioner.js:19)
in CardStackTransitioner (at StackNavigator.js:41)
in Unknown (at createNavigator.js:13)
in Navigator (at createNavigationContainer.js:226)
in NavigationContainer (at App.js:875)
in App (at registerRootComponent.js:35)
in RootErrorBoundary (at registerRootComponent.js:34)
in ExpoRootComponent (at renderApplication.js:35)
in RCTView (at View.js:71)
in View (at AppContainer.js:102)
in RCTView (at View.js:71)
in View (at AppContainer.js:122)
in AppContainer (at renderApplication.js:34)
* App.js:811:16 in render
- node_modules\react-proxy\modules\createPrototypeProxy.js:44:35 in proxiedMethod
- node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:7866:21 in finishClassComponent
- ... 18 more stack frames from framework internals

If you want to loop through languages you can use below example. For more info you can check Object.keys()
The Object.keys() method returns an array of a given object's own
enumerable properties, in the same order as that provided by a
for...in loop (the difference being that a for-in loop enumerates
properties in the prototype chain as well).
Example
render() {
return (
<View style={styles.container}>
<Picker
selectedValue={this.state.language}
onValueChange={(itemValue) => this.setState({language: itemValue})}>
{
Object.keys(this.state.isoLangs).map((lang) => {
console.log('lang: ', lang);
console.log('lang name: ', this.state.isoLangs[lang].name);
console.log('lang nativeName: ', this.state.isoLangs[lang].nativeName);
return <Picker.Item key={lang} label={this.state.isoLangs[lang].name} value={lang} />
})
}
</Picker>
</View>
);
}

IsoLangs need to be an array, try this ...
isoLangs : [
"ab":{
"name":"Abkhaz",
"nativeName":"аҧсуа"
},
"aa":{
"name":"Afar",
"nativeName":"Afaraf"
},
"af":{
"name":"Afrikaans",
"nativeName":"Afrikaans"
},
"ak":{
"name":"Akan",
"nativeName":"Akan"
},
"sq":{
"name":"Albanian",
"nativeName":"Shqip"
},
"am":{
"name":"Amharic",
"nativeName":"አማርኛ"
},
"ar":{
"name":"Arabic",
"nativeName":"العربية"
},
"an":{
"name":"Aragonese",
"nativeName":"Aragonés"
},
"hy":{
"name":"Armenian",
"nativeName":"Հայերեն"
},
"as":{
"name":"Assamese",
"nativeName":"অসমীয়া"
},
"av":{
"name":"Avaric",
"nativeName":"авар мацӀ, магӀарул мацӀ"
},
"ae":{
"name":"Avestan",
"nativeName":"avesta"
},
"ay":{
"name":"Aymara",
"nativeName":"aymar aru"
},
"az":{
"name":"Azerbaijani",
"nativeName":"azərbaycan dili"
},
"bm":{
"name":"Bambara",
"nativeName":"bamanankan"
},
"ba":{
"name":"Bashkir",
"nativeName":"башҡорт теле"
},
"eu":{
"name":"Basque",
"nativeName":"euskara, euskera"
},
"be":{
"name":"Belarusian",
"nativeName":"Беларуская"
},
"bn":{
"name":"Bengali",
"nativeName":"বাংলা"
},
"bh":{
"name":"Bihari",
"nativeName":"भोजपुरी"
},
"bi":{
"name":"Bislama",
"nativeName":"Bislama"
},
"bs":{
"name":"Bosnian",
"nativeName":"bosanski jezik"
},
"br":{
"name":"Breton",
"nativeName":"brezhoneg"
},
"bg":{
"name":"Bulgarian",
"nativeName":"български език"
},
"my":{
"name":"Burmese",
"nativeName":"ဗမာစာ"
},
"ca":{
"name":"Catalan; Valencian",
"nativeName":"Català"
},
"ch":{
"name":"Chamorro",
"nativeName":"Chamoru"
},
"ce":{
"name":"Chechen",
"nativeName":"нохчийн мотт"
},
"ny":{
"name":"Chichewa; Chewa; Nyanja",
"nativeName":"chiCheŵa, chinyanja"
},
"zh":{
"name":"Chinese",
"nativeName":"中文 (Zhōngwén), 汉语, 漢語"
},
"cv":{
"name":"Chuvash",
"nativeName":"чӑваш чӗлхи"
},
"kw":{
"name":"Cornish",
"nativeName":"Kernewek"
},
"co":{
"name":"Corsican",
"nativeName":"corsu, lingua corsa"
},
"cr":{
"name":"Cree",
"nativeName":"ᓀᐦᐃᔭᐍᐏᐣ"
},
"hr":{
"name":"Croatian",
"nativeName":"hrvatski"
},
"cs":{
"name":"Czech",
"nativeName":"česky, čeština"
},
"da":{
"name":"Danish",
"nativeName":"dansk"
},
"dv":{
"name":"Divehi; Dhivehi; Maldivian;",
"nativeName":"ދިވެހި"
},
"nl":{
"name":"Dutch",
"nativeName":"Nederlands, Vlaams"
},
"en":{
"name":"English",
"nativeName":"English"
},
"eo":{
"name":"Esperanto",
"nativeName":"Esperanto"
},
"et":{
"name":"Estonian",
"nativeName":"eesti, eesti keel"
},
"ee":{
"name":"Ewe",
"nativeName":"Eʋegbe"
},
"fo":{
"name":"Faroese",
"nativeName":"føroyskt"
},
"fj":{
"name":"Fijian",
"nativeName":"vosa Vakaviti"
},
"fi":{
"name":"Finnish",
"nativeName":"suomi, suomen kieli"
},
"fr":{
"name":"French",
"nativeName":"français, langue française"
},
"ff":{
"name":"Fula; Fulah; Pulaar; Pular",
"nativeName":"Fulfulde, Pulaar, Pular"
},
"gl":{
"name":"Galician",
"nativeName":"Galego"
},
"ka":{
"name":"Georgian",
"nativeName":"ქართული"
},
"de":{
"name":"German",
"nativeName":"Deutsch"
},
"el":{
"name":"Greek, Modern",
"nativeName":"Ελληνικά"
},
"gn":{
"name":"Guaraní",
"nativeName":"Avañeẽ"
},
"gu":{
"name":"Gujarati",
"nativeName":"ગુજરાતી"
},
"ht":{
"name":"Haitian; Haitian Creole",
"nativeName":"Kreyòl ayisyen"
},
"ha":{
"name":"Hausa",
"nativeName":"Hausa, هَوُسَ"
},
"he":{
"name":"Hebrew (modern)",
"nativeName":"עברית"
},
"hz":{
"name":"Herero",
"nativeName":"Otjiherero"
},
"hi":{
"name":"Hindi",
"nativeName":"हिन्दी, हिंदी"
},
"ho":{
"name":"Hiri Motu",
"nativeName":"Hiri Motu"
},
"hu":{
"name":"Hungarian",
"nativeName":"Magyar"
},
"ia":{
"name":"Interlingua",
"nativeName":"Interlingua"
},
"id":{
"name":"Indonesian",
"nativeName":"Bahasa Indonesia"
},
"ie":{
"name":"Interlingue",
"nativeName":"Originally called Occidental; then Interlingue after WWII"
},
"ga":{
"name":"Irish",
"nativeName":"Gaeilge"
},
...
"yi":{
"name":"Yiddish",
"nativeName":"ייִדיש"
},
"yo":{
"name":"Yoruba",
"nativeName":"Yorùbá"
},
"za":{
"name":"Zhuang, Chuang",
"nativeName":"Saɯ cueŋƅ, Saw cuengh"
}
];

Categories