CODEWITHSUNDEEP
javascriptreact-native
Martina
Martina

Reputation: 193

How to call the state when the response comes from the api?

What I'm trying to do is to display in a list all the clients. When there is no client in the list, it is another view that is displayed which says no client exists. The initial value of the state its an empty array. So when the axios.get() method gets the data from the backend, two times its called the initial value(which is an empty array), and after its filled with the client list that comes from backend.

  const [clientList, setClientList] = useState([])

  useEffect(() => {
        axios
          .get(`api/${phone}`)
          .then(setClientList(response.data.data))
          })
          .catch((error) => console.log(error));
      }
    });
  }, [clientList]); 
  
  console.log(clientList)


return(
            {clientList.length > 0? (
              <View>
                <FlatList
                  data={clientList}
                  renderItem={(item) => {
                    let client= item.item.fullName;
                    return (
                      <View >
                        <Text>{client}</Text>
                        />
                      </View>
                    )
                  }}
                />
              </View>
            ) : (
              <Text> No Client List </Text>
            )}
)

When I console the clientList it will show:

clientList[]
clientList[]
clientList[
{
  fullName: John Doe
},
{
  fullName: Nick Smith
}
]

The first two empty arrays (that comes from the initial value of the useState) it will show the No Client List every time the user goes to the client list screen or reload the screen.

How can I prevent showing the <Text> No Client List </Text> when the clientList has clients on the array?

Upvotes: 1

Views: 64

Answers (1)

imKrishh
imKrishh

Reputation: 977

you can add a new state isLoading which will be true by default to handle the clientList initial empty array case.

const [isLoading, setIsLoading] = useState(true)

 ...
 
useEffect(() => {
  axios
    .get(`api/${phone}`)
    .then(() => {
      setIsLoading(false)
      setClientList(response.data.data)
    })
    .catch(() => {
      setIsLoading(false)
    });
}, []);

...
// you can conditionally return UI based on `isLoading` or you can use `ListEmptyComponent` prop from FlatList along with `isLoading`

if(isLoading) { 
  return(<Text>loading</Text>)
}

// remaining code
return(
  ...

Upvotes: 1

Related Questions