Is there a way to loop inside the render's return method?
I have an object that looks like this:
export var Characters = [
{
id: 1,
Name: "Abe",
HitPointValue: "124",
StrengthValue: "12",
IntelligenceValue: "14",
WisdomValue: "16",
DexterityValue: "12",
ConstitutionValue: "10",
CharismaValue: "17",
Avatar: require('./images/avatar_1.jpg')
},
{
id: 2,
Name: "Jake",
HitPointValue: "141",
StrengthValue: "21",
IntelligenceValue: "6",
WisdomValue: "5",
DexterityValue: "8",
ConstitutionValue: "20",
CharismaValue: "10",
Avatar: require('./images/avatar_2.jpg')
}
]
Instead of writing out each character in the object like this:
render() {
return (
<View>
<View>
<Image source={getAvatar(1)} />
</View>
<View>
<Text>
Name: { getName(1)
</Text>
</View>
</View>
)
}
I was wondering if I could just loop through it?
thanks!
Use the Array's map() method
e.g.
render() {
return (
<View>
{Characters.map(character =>
<View>
<Image source={character.avatar}/>
<Text>Name: {character.name}</Text>
</View>
)}
</View>
)
}
Related
I have read all similar questions in stack overflow on this topic. Yet my info is not being displayed.
I am fetching locations from tomtom api. I have limit the result up to one location for simplicity. My data:
items: Array [
Object {
"address": Object {
"country": "United States",
"countryCode": "US",
"countryCodeISO3": "USA",
"countrySecondarySubdivision": "Hidalgo",
"countrySubdivision": "TX",
"countrySubdivisionName": "Texas",
"extendedPostalCode": "78542-7214",
"freeformAddress": "1718 South 28th Avenue, Edinburg, TX 78542",
"localName": "Edinburg",
"municipality": "Edinburg",
"postalCode": "78542",
"streetName": "South 28th Avenue",
"streetNumber": "1718",
},
"dist": 7911851.058335642,
"entryPoints": Array [
Object {
"position": Object {
"lat": 26.28239,
"lon": -98.14742,
},
"type": "main",
},
],
"id": "840489007442969",
"info": "search:ta:840489007442969-US",
"poi": Object {
"categories": Array [
"company",
"equipment rental",
],
"categorySet": Array [
Object {
"id": 9352038,
},
],
"classifications": Array [
Object {
"code": "COMPANY",
"names": Array [
Object {
"name": "equipment rental",
"nameLocale": "en-US",
},
Object {
"name": "company",
"nameLocale": "en-US",
},
],
},
],
"name": "Wylie Implement Edinbu",
"phone": "+1 956-550-8822",
},
"position": Object {
"lat": 26.28223,
"lon": -98.1464,
},
"score": 1.9846990108,
"type": "POI",
"viewport": Object {
"btmRightPoint": Object {
"lat": 26.2813,
"lon": -98.14536,
},
"topLeftPoint": Object {
"lat": 26.28316,
"lon": -98.14744,
},
},
},
]
My component:
const AutocompleteResults = (props) => {
const [locations, setLocations] = useState(props.items);
console.log("items: ", locations);
useEffect(() => {
setLocations(props.items);
}, [props.items]);
return (
<View style={{ flex: 1, marginBottom: 20 }}>
<Text>Result</Text>
{locations.length>0 ? (
<>
<Text>Items</Text>
<FlatList
style={{ flex: 1, borderColor: "red", borderWidth: 1 }}
horizontal={false}
data={locations}
keyExtractor={(item, index) => index.toString()}
renderItem={({location}) => {
console.log("single location ", location);
return <Text>Location</Text>;
}}
/>
</>
) : null}
</View>
);
};
const style = StyleSheet.create({
viewStyle: {
flex: 1,
justifyContent: "center",
},
});
export default AutocompleteResults;
What I see on the console is: single location undefined
I tried all the suggestions which I found in stack overflow. In my opinion the problem is in extractKey method but I dont know how to fix it.
On the screen I just see the words "Result" "Items" followed by red dash (coming from my styling for flatlist)
EDIT:
I edited my render function in the following way:
renderItem={({ item }) => {
console.log("single location ", item);
return (
<View style={{ flex: 1, height: 30 }}>
<Text>Location</Text>
</View>
);
}}
But the "Location" text still does not display
You are destructuring location in the renderItem function of the FlatList. This fails, because there is no such parameter. The parameter is called item.
This is explained in the documentation.
renderItem({ item, index, separators });
item (Object): The item from data being rendered.
The following code should fix the issue.
return (
<View style={{ flex: 1, marginBottom: 20 }}>
<Text>Result</Text>
{locations.length>0 ? (
<>
<Text>Items</Text>
<FlatList
style={{ flex: 1, borderColor: "red", borderWidth: 1 }}
horizontal={false}
data={locations}
keyExtractor={(item, index) => index.toString()}
renderItem={({item}) => {
console.log("single location ", item);
return <Text>Location</Text>;
}}
/>
</>
) : null}
</View>
);
};
The extractKey function is fine.
as the title suggests I would like to know how to use the getParam function to access a nested array. This is my json and my code.
Json:
[
{
"name": "Crock Pot Roast",
"ingredients": [
{
"quantity": "1",
"name": " beef roast",
"type": "Meat"
},
{
"quantity": "1 package",
"name": "brown gravy mix",
"type": "Baking"
},
{
"quantity": "1 package",
"name": "dried Italian salad dressing mix",
"type": "Condiments"
},
{
"quantity": "1 package",
"name": "dry ranch dressing mix",
"type": "Condiments"
},
{
"quantity": "1/2 cup",
"name": "water",
"type": "Drinks"
}
],
"steps": [
"Place beef roast in crock pot.",
"Mix the dried mixes together in a bowl and sprinkle over the roast.",
"Pour the water around the roast.",
"Cook on low for 7-9 hours."
],
I capture the data that interest me and print them, accessing the nested array via map (quantity values, name, type) in this screen.
Screen1:
<FlatList
numColumns={2}
data={this.state.breweries}
renderItem={({ item, index }) => (
<View style={styleResult.box}>
<TouchableOpacity onPress={() =>this.props.navigation.navigate('ReviewDetails', item)}>
<Image style={styleResult.logo}
source={{uri: item.imageURL}} />
<Text style={styleResult.titleRecipe}> {item.name}</Text>
{item.ingredients.map((v,i) => (
<Text style={styleResult.titleRecipe}> {v.name}</Text>
))}
</TouchableOpacity>
But when I want to bring every single value to a second page via onpress, in screen 2 if I want to print the name I can with getParam ('name'), but if I wanted to print the names of the ingredients, I don't know how to do it.
Screen2
const link=navigation.getParam('imageURL');
return(
<View style={styleReviewDetails.container}>
<ScrollView>
<Text style={styleReviewDetails.titleRecipe} >{navigation.getParam('name')}</Text>
<Image style={styleReviewDetails.imageRecipe} source={{uri: link}}></Image>
<Text style={styleReviewDetails.titleRecipe} >Ingredients: ???????</Text>
In your details screen you have an object of the json type you posted.
Therefore, if you want to have a string which contains the ingredient names you could obtain it like this:
const ingredients = navigation.getParam('ingredients') // here you have the list
const ingredientNames = ingredients.map((ingredient) => ingredient.name)
// if you want to put there a separator, like "," you can do it like this:
const ingredientNames = ingredients.map((ingredient, index) => `${ingredient.type}` + ( index !== ingredients.length-1 ? " ," : ""))
// in your code it will be used like this
...
<Text>
{ingredientNames}
</Text>
I get an array after console log my state that get data from Firebase. I want to know: can anyone help me to map array and get below details on ui. Thank You.
I tried below way, but app keep getting errors
Array [
Object {
"lists": Array [
Object {
"lists": Array [
Object {
"id": "123",
"imageUrl": "http://www.pngmart.com/files/1/Pizza-Slice-PNG-Transparent-Image.png",
"name": "Chicken Devill pizza",
"price": 700,
"size": "Medium",
},
],
"randomid": "32013408-0f48-4b15-80c4-eba3fc1fe295",
},
Object {
"lists": Array [
Object {
"id": "1234",
"imageUrl": "http://www.pngmart.com/files/1/Cheese-Pizza.png",
"name": "Cheese pork pizza",
"price": 1500,
"size": "Medium",
},
],
"randomid": "12a74805-4932-4397-b838-6773bc7e44b8",
},
],
},
]
In below code it show a error:
TypeError: undefined is not a function (near '...this.state.lists.map...')
{this.state.lists.lists.map((current, i) => (
))}
The first list here is an array not an Object. You can't call lists.lists because of this.
You will need to flatten the list or use nested map operations.
export default function App() {
const state = {
lists: [
{
lists: [
{
id: "123",
imageUrl:
"http://www.pngmart.com/files/1/Pizza-Slice-PNG-Transparent-Image.png",
name: "Chicken Devill pizza",
price: 700,
size: "Medium"
}
],
randomid: "32013408-0f48-4b15-80c4-eba3fc1fe295"
},
{
lists: [
{
id: "1234",
imageUrl: "http://www.pngmart.com/files/1/Cheese-Pizza.png",
name: "Cheese pork pizza",
price: 1500,
size: "Medium"
}
],
randomid: "12a74805-4932-4397-b838-6773bc7e44b8"
}
]
};
return (
<div className="App">
{state.lists.map((list) => {
return list.lists.map((item) => {
return <p>{item.id}</p>;
});
})}
</div>
);
}
You can find this working here: https://codesandbox.io/s/nervous-tu-u2h8v?file=/src/App.js
I also want to add some thing by myself
I done the mapping inside a mapping like this
{this.state.lists.map((current, i) => (
<View>
{current.map((current, i) => (
<Fragment>
<TouchableOpacity style={styles.card} onPress={() => this.details(current.id)}>
<Image style={styles.img} key={i} source={{uri: current.lists[0].imageUrl}}/>
<Text style={styles.txt} key={i}>{current.lists[0].name}</Text>
<Text style={styles.txt} key={i}>{current.lists[0].size}</Text>
<Text style={styles.txt} key={i}>LKR.{current.lists[0].price}</Text>
</TouchableOpacity>
</Fragment>
))}
</View>
))}
I have an array:
[
{
"room": {
"id": "1",
"name": "NameRoom"
},
"users": [
{
"userId": "1",
"userName": "User1",
},
{
"userId": "2",
"userName": "User12",
},
{
"userId": "3",
"userName": "User13",
}
]
},
{
"room": {
"id": "2",
"name": "NameRoom2"
},
"users": [
{
"userId": "4",
"userName": "User14",
},
{
"userId": "5",
"userName": "User15",
},
{
"userId": "6",
"userName": "User16",
}
]
},
]
Here is my rendering code
componentDidMount() {
fetch('https://site.ru/api/rooms')
.then((response) => response.json())
.then((responseJson) => {
this.setState({
dataSource: responseJson,
})
console.log(responseJson[0].users[0].userName) // i get User1
})
.catch((error) => {
console.log(error)
})
}
renderItemRooms = ({ item,index }) => (
<View style = {styles.containerHeader}>
<Text style = {styles.dateTitle}>16.04.2020</Text>
</View>
<TouchableOpacity style = {styles.containerMain}>
<Text style = {styles.nameTitle}>RoomName</Text>
<IconButton
style={styles.menuIcon}
icon="text"
color={'#e7eee6'}
size={40}
onPress={this._toggleBottomNavigationView}
/>
<BottomSheet
visible={this.state.visible}
onBackButtonPress={this._toggleBottomNavigationView}
onBackdropPress={this._toggleBottomNavigationView}
>
<View style={styles.bottomNavigationView}>
<View style={styles.bottomList}>
<FlatList
keyExtractor={item => item.name}
data={this.state.dataSource}
renderItem={this.renderItemUsers}
/>
</View>
<View style={styles.bottomButton}>
<TouchableOpacity style={styles.buttonStyle}>
<Text>Connect</Text>
</TouchableOpacity>
</View>
</View>
</BottomSheet>
</TouchableOpacity>
)
How can I display a list of users in the internal render in my code?
And print the names of rooms.
How to iterate through such an array correctly?
I need to output TouchableOpacity with the name of the room, it has a button on the right, when you click it, a modal menu appears, which contains a list of users in this room, how do I do this correctly?
I've already searched the Internet and didn't find a similar problem.
I notice that you have missed something in FlatList, also there many methods to iterate an array. I will give you an example here and hope this helps.
Example:
<FlatList
keyExtractor={item => item.room.name} {/* item.name is undefined, you need to add room.name */}
data={this.state.dataSource}
renderItem={this.renderItemUsers}
/>
// And renderItemUsers method
renderItemUsers = ({ item }) => {
const Users = () => item.users.map(user => <Text key={user.userId}>{user.userName}</Text>)
return (
<View>
<Text>Room : {item.room.name}</Text>
<Users />
</View>
)
}
I have arrays I'm passing via props like this:
{
id: 1,
Name: "Abe",
HitPointValue: "124",
StrengthValue: "12",
IntelligenceValue: "14",
WisdomValue: "16",
DexterityValue: "12",
ConstitutionValue: "10",
CharismaValue: "17",
Avatar: require('./images/avatar_1.jpg')
}
I receive these in a component like this:
static navigationOptions = ({ navigation }) => {
const {char} = state.params;
}
When I write out the properties of the array one by one like this, it works:
render() {
const { params } = this.props.navigation.state;
return (
<View>
<Text>
Name: {params.char.Name}{"\n"}
</Text>
</View>
)
}
But when I try to use "map" to loop through the array(like below), I just get an error that states "
undefined is not a function (params.char.map)
.
render() {
const { params } = this.props.navigation.state;
return (
<View>
{params.char.map(c =>
<Text>
{c.key} : {c.value} {"\n"}
</Text>
)}
</View>
)
}
I'm trying to follow this guide, Lists and Keys but it's not working.
What could I be doing wrong?
thanks!
Because that data is not an array, and map only works with array. Use Object.entries first then use map.
Write it like this:
render() {
const { params } = this.props.navigation.state;
return (
<View>
{Object.entries(params.char).map(([key,value], index) =>
<Text key={key}>
{key} : {value} {"\n"}
</Text>
)}
</View>
)
}
Check this snippet:
let obj = {
id: 1,
Name: "Abe",
HitPointValue: "124",
StrengthValue: "12",
IntelligenceValue: "14",
WisdomValue: "16",
DexterityValue: "12",
ConstitutionValue: "10",
CharismaValue: "17",
};
Object.entries(obj).map(([key, value], index) => console.log(key, value, index))