useState setmethod is updating inside useEffect but not reflecting the result outside - react-native

Question

I was trying to use react-native-contacts library to display my contacts in the app. I am able to establish the connection and name of every person is visible when I do a console.log.
I have created this usestate hook
let [con,setContacts] = useState([])
What I want is to add all the names along with index to this array like this
{name:"adi",index:"1"}
I also did this inside a useEffect hook, but the issue is that when I call console.log(con.length) it prints the total value is 243.When I call the same method outside the useEffect it shows 1. It seems that the usestate is not updating outside.
CODE::
import React, {useState, useEffect} from 'react';
// Import all required component
import {
PermissionsAndroid,
Platform,
SafeAreaView,
StyleSheet,
Text,
View,
FlatList,
TextInput,
} from 'react-native';
import Contacts from 'react-native-contacts';
const ContactScreen = function(){
let [con, setContacts] = useState([]);
//console.log("after usestate")
useEffect(()=>{
PermissionsAndroid.request(
PermissionsAndroid.PERMISSIONS.READ_CONTACTS,
{
'title': 'Contacts',
'message': 'This app would like to view your contacts.',
'buttonPositive': 'Please accept bare mortal'
}
)
Contacts.getAll().then(contacts => {
// contacts returned
console.log("heyyyyyy===================")
contacts.map((item,index)=>{
//console.log(item.displayName)
let nobj={name:item.displayName,index:index}
//console.log(nobj)
let arr=con.push(nobj)
//console.log(arr)
setContacts([arr])
console.log(con.length);
//console.log(con);
console.log("=================================================");
})
})
},[])
//issue ==>> displays 1
console.log(con.length);
return(
<View style={style.container}>
<Text>
this is contact screen
</Text>
<Text>{con.length}</Text>
</View>
)
}
const style = StyleSheet.create({
container: {
flex:1,
margin:10,
backgroundColor: '#ebebeb'
}
})
export default ContactScreen;
Output:
output shows that state is updating inside use effect

Answer 1

Hi Firstly you should map the contacts in your designed form. After that when it's mapped then just set the array of contacts in one line. Check out the my following solution.
import React, {useState, useEffect} from 'react';
// Import all required component
import {
PermissionsAndroid,
Platform,
SafeAreaView,
StyleSheet,
Text,
View,
FlatList,
TextInput,
} from 'react-native';
import Contacts from 'react-native-contacts';
const ContactScreen = function(){
let [con, setContacts] = useState([]);
//console.log("after usestate")
useEffect(()=>{
PermissionsAndroid.request(
PermissionsAndroid.PERMISSIONS.READ_CONTACTS,
{
'title': 'Contacts',
'message': 'This app would like to view your contacts.',
'buttonPositive': 'Please accept bare mortal'
}
)
Contacts.getAll().then(contacts => {
// contacts returned
const modififiedContacts = contacts.map((item,index)=>{
return {name:item.displayName,index:index}
});
setContacts(modifiedContacts);
})
},[])
//issue ==>> displays 1
console.log(con.length);
return(
<View style={style.container}>
<Text>
this is contact screen
</Text>
<Text>{con.length}</Text>
</View>
)
}
const style = StyleSheet.create({
container: {
flex:1,
margin:10,
backgroundColor: '#ebebeb'
}
})
export default ContactScreen;