(React Native) - Pass parameter in <FlatList renderItem> - javascript

My FlatList looks like this:
<FlatList
style={styles.scrollView}
data={data}
keyExtractor={({ id }, index) => id}
renderItem={({ item }) => <Item item={item} />}
/>
Item looks like this:
const Item = ({ item }) => {
...
}
I want to pass a parameter (let's say I call it "myParam") to "Item" from FlatList renderItem

<FlatList
style={styles.scrollView}
data={data}
keyExtractor={({ id }, index) => id}
renderItem={({ item }) => <Item item={item} myParam ={data}/>}
/>
const Item = ({ item, myParam }) => {
...
}

Related

Flatlist can't render items

I wasn't able to understand why it does not render the contents of dummyData when I use it with renderItem arrow function but it works with when I pass {item}) => <Text style={styles.item}>{item.key}</Text> to renderItem props directly
const HomeScreen = ({ navigation }) => {
const renderItem = ({item}) => {
<Text style={styles.item}>{item.key}</Text>
}
dataUtils.fetchData();
return(
<View style={styles.container}>
<FlatList
data={dummyData}
renderItem={renderItem}
keyExtractor={item => item.id}
/>
</View>
);
};
You are missing a return statement. Delete brackets or add a return.
Like this:
const renderItem = ({item}) =>
<Text style={styles.item}>{item.key}</Text>
Or:
const renderItem = ({item}) => {
return <Text style={styles.item}>{item.key}</Text>
}

display image and text from array on react native

I'm new on react native. I want to display images and text from array.
When I'm trying to extract image from my app, It doesn't work, the images are not displayed.
const DATA = [
{
title: "Animaux",
data: ["Poissons","Crevettes","Escargots"],
image: [require('../assets/icon_aquarium_style.png'),require('../assets/icon_aquarium_style.png'),require('../assets/icon_aquarium_style.png')]
}
];
const Item = ({ title }) => (
<View style={styles.item}>
<Text style={styles.title}>{title}</Text>
</View>
);
const ImageType = ({ image }) => (
<View style={styles.image}>
<Image source={image}/>
</View>
);
export default class InventaireScreen extends React.Component {
render() {
return (
<SafeAreaView style={styles.container}>
<SectionList
sections={DATA}
keyExtractor={(item, index) => item + index}
renderItem={({ item, image }) =>
<View >
<ImageType source={image}/>
<Item title={item} />
</View>
}
renderSectionHeader={({ section: { title } }) => (
<View>
<Text>{title}</Text>
</View>
)}
/>
</SafeAreaView>
);
}
}
the images are not displaying.
Could you please tell me where I'm wrong ?
Thanks.
EDIT :
I modified my array like that :
const DATA = [
{
title: "Poissons",
image: require('../assets/icon_aquarium_style.png')
},
{
title: "Crevettes",
image: require('../assets/icon_aquarium_style.png')
},
{
title: "Escargots",
image: require('../assets/icon_aquarium_style.png')
},
];
I try to extract data using render:
export default class InventaireScreen extends React.Component {
render() {
return (
<SafeAreaView style={styles.container}>
<SectionList
sections={DATA}
keyExtractor={(item, index) => item + index}
renderItem={({ item }) =>
<View style={{flexDirection: 'row', textAlign: 'left', fontSize: 15, backgroundColor:'white'}}>
<ImageType image={item.image}/>
<Item title={item.data} />
</View>
}
renderSectionHeader={({ section: { title } }) => (
<View>
<Text style={styles.header}>{title}</Text>
</View>
)}
/>
</SafeAreaView>
);
}
}
I want to display section title using title parameter, an image using image source, and a text using data parameter of my array.
I have this error
ERROR TypeError: undefined is not an object (evaluating 'items.length')
``
In Your Statement
renderItem={({ item, image }) =>
the second argument should be index,
Instead of 'image' it should be 'index'
renderItem={({ item, index }) =>
In order to fetch parameter 'image' from your array you will need to change your code like below :
<View >
<ImageType image={item.image}/>
<Item title={item.title} />
</View>
you data object should be an array of objects to map through it, like
var Data = [{title:"Poissons",image:require('../assets/icon_aquarium_style.png')},{title:"Crevettes",image:require('../assets/icon_aquarium_style.png')},{...},{...}]
and then in render item
{({ item }) =>
<View >
<ImageType image={item.image}/>
<Item title={item.title} />
</View>
}
Try correcting renderItem.
renderItem={({ item }) =>
<View >
<ImageType image={item.image}/>
<Item title={item.title} />
</View>
}
and keyExtractor.
keyExtractor={(item, index) => item.title + index}
this keyExtractor will only take the title and index instead of the full object.
and data format.
const DATA = [
{
title: "Poissons",
image: require('../assets/icon_aquarium_style.png')
},
{
title: "Crevettes",
image: require('../assets/icon_aquarium_style.png')
},
{
title: "Escargots",
image: require('../assets/icon_aquarium_style.png')
},
];

Nothing was return from render in renderItem

I have DATA - array of arrays(important) with items, and trying to create flatlist:
<FlatList
data={DATA}
renderItem={renderItem}
keyExtractor={(item) => item.id}
/>
so when I was mapping items in renderItem like that:
items.map((item, index) => {
return (
<View style={styles.item} key={index}>
</View>
);
});
I have received Nothing was return error. What am I supposed to do?
Ed. https://snack.expo.io/#komarnytskiyivan/gnarly-waffle - code sandbox
You need to change your Item component like so :-
const Item = ({ items }) => {
return items.map((item, index) => {
return (<View style={styles.item} key={index}>
<Text style={styles.title}>{item.title}</Text>
</View>);
});
};
Changes :-
return the new array from .map
return the <View>...</View> component
remove the item && index check. Will fail when index is equal to 0.
In your Item you have this:
const Item = ({ items }) => {
console.log(items);
items.map((item, index) => {
console.log(item)
if (item && index) {
return (
<View style={styles.item} key={index}>
<Text style={styles.title}>{item.title}</Text>
</View>
);
}
});
};
You need to return from the items.map so it is return items.map
<FlatList
data={DATA}
renderItem={renderItem}
keyExtractor={(item) => item.id}
/>
Use renderItem like this
renderItem = ({ item }) => {
return (
<View style={styles.item} key={index}>
// Your view here
</View>
);
};

How to display a single dimensional array in FlatList

You would think that this would be the easiest thing in the world to find an example of but everthing I found online has always had a JSON file as the data source so there are keys to reference
stuff like this...eg item.name etc
const list = [
{
name: 'Amy Farha',
subtitle: 'Vice President'
},
{
name: 'Chris Jackson',
avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg',
subtitle: 'Vice Chairman'
},
... // more items
]
keyExtractor = (item, index) => index.toString()
renderItem = ({ item }) => (
<ListItem
title={item.name}
subtitle={item.subtitle}
leftAvatar={{
source: item.avatar_url && { uri: item.avatar_url },
title: item.name[0]
}}
/>
)
My data source is just a plain single dimension array, no keys or identifiers of any kind. The data is what it is and wont be changed
data = ['value1','value2','value3',...]
The code I have so far (which obviously doesnt work) is
import React, { Component } from 'react'
import { FlatList, ListItem } from 'react-native'
<FlatList
data={this.state.data}
renderItem={({ item }) => (
<ListItem
key={item.id}
/>
)}
/>
Im guessing I need to use the keyExtractor somewhere to generate an id but how do I reference the actual values in the data to display them if it doesnt have an identifier in the data like a json would?
Try this:
<FlatList
data={this.state.data}
keyExtractor={item => item}
renderItem={({ item }) => (
<ListItem
title={item}
/>
)}
/>
const ListItem = ({ title }) => (
<View>
<Text>{title}</Text>
...
</View>
);

How do I use filter to return a new array minus the one item that has been selected?

I'm using Flatlist to render a list of items. In Componentwillmount, I set the state to result of a fetch.
constructor() {
super();
this.state = {
listOfCameras: [],
};
}
componentWillMount() {
apiService.listCameras().then((res) => {
this.setState({ listOfCameras: res });
});
}
My Flatlist looks like this:
createListOfCams() {
return (
<FlatList
data={this.state.listOfCameras}
renderItem={({ item, index }) => {
return (
this.createSingleCamera(item, index)
);
}}
keyExtractor={(item, index) => index.toString()}
// extraData={}
/>
);
}
and finally my createSingleCamera looks like this:
createSingleCamera(item, index) {
const modelCam = item.model;
return (
<View style={styles.singleCamLineView}>
<View style={styles.modelCamNameView}>
<Text style={styles.singleCameraText}>{modelCam}</Text>
</View>
<View style={styles.deleteIconView}>
<TouchableOpacity
onPress={() => {
this.deleteCamFromList(item, index);
}}
>
<Text style={styles.singleCameraText}> </Text>
</TouchableOpacity>
</View>
</View>
);
}
What I'd like to do is pass on the index of the item I want to delete to the deleteCamFromList method and then use that to re-render the Flatlist.
So far my deletefromCamList looks like this:
deleteCamFromList(item, index) {
let allCamerasBeforeDelete = [...this.state.listOfCameras];
let newArryOfCams = allCamerasBeforeDelete.filter(index);
}
How would I use filter to return a new array minus the index that I provided it?
The second argument given to Array.prototype.filter is the item index, so:
deleteCamFromList(item, index) {
let newArrayOfCams = this.state.listOfCameras.filter((_, i) => i !== index);
this.setState({listOfCameras: newArrayOfCams})
}

Categories