Using React Hooks initialize Data, But Not Work Correctly

[LiuL0703]

here is my code

import React, {Fragment,useState, useEffect,useReducer} from 'react';
import {
 SafeAreaView,
 ScrollView,
 View,
 Text,
 TouchableHighlight,
 FlatList
} from 'react-native';


const HomePage = (props) => {
 const [selectedName,setselectedName] = useState('');
 const [nameList, setNameList] = useState([{'name':'abcd'},
 {'name':'abcd'},
 {'name':'abcd'},
 {'name':'abcd'}
 ]);

 function handleSelectName(value){
 setselectedName(value);
 }


 return (
 <Fragment>
 <SafeAreaView>
 <ScrollView
 contentInsetAdjustmentBehavior="automatic">
 <View>
 { nameList.length > 0 && CustomCount(nameList,selectedName,handleSelectName) }
 </View>
 </ScrollView>
 </SafeAreaView>
 </Fragment>
 );
};


function CustomCount(data,count,handle){
 const counterStyle = {
 fontSize: 30,
 color: 'red',
 };
 return (
 <FlatList
 data={data}
 renderItem={({ item, index }) => (
 <View key={item}>
 <TouchableHighlight 
 onPress={()=>handle(index)} 
 >
 <Text style={ index === count ? counterStyle : {color: 'green'}} >{item.name}</Text>
 </TouchableHighlight>
 </View>
 )}
 numColumns={3}
 />
 )
}

export default HomePage;

What I expected

when i clicked the name, which name's style changes

What actually did

nothing happened

env

"react": "16.8.6",
"react-native": "0.60.4",

[react-native-bot]

We are automatically closing this issue because it does not appear to follow any of the provided issue templates.

👉 Click here if you want to report a reproducible bug or regression in React Native.