In my app, i have a flat list in my app and there is a button I want to add not in the whole flatlist but some of the list components so that's why i need to call the key id of that specific component to the function. Here is the code of flat list. ** <FlatList
data={this.state.dataSource}
renderItem={this.renderItem}
// keyExtractor= {(item,index) => index}
keyExtractor={item => item.GameId.toString()}
ItemSeparatorComponent={this.renderSeprator}
refreshing = {this.state.refreshing}
onRefresh = {this.handleRefresh}
handlePress={item => item.GameId.toString()}
/>
** This is the function where i want to call gameID ** handlePress = () => {
if( this.GameId == 1){
this.setState({
btnvalue1: 'flex'});
console.log('ssss11');
} else {
this.setState({
btnvalue1: 'none'});
}
}
**
CodePudding user response:
You can do like below
Code
import React, {useState} from 'react';
import {FlatList, View, Text} from 'react-native';
const myData = [
{
id: 1,
name: 'React',
},
{
id: 2,
name: 'Native',
},
];
export default function App() {
const [data, setData] = useState(myData);
const renderItem = ({item, index}) => {
return (
<View
style={{
height: 50,
width: '90%',
marginLeft: '5%',
flexDirection: 'row',
borderWidth: 1,
borderColor: 'black',
marginBottom: 10,
}}>
<Text>{item.name}</Text>
{item.name === 'Native' ? (
<View style={{height: 35, width: 35, backgroundColor: 'red'}}></View>
) : null}
</View>
);
};
return (
<View>
<FlatList
style={{marginTop: 50}}
data={data}
keyExtractor={(item, index) => String(index)}
renderItem={renderItem}
/>
</View>
);
}
Hope this helps !!!