expo - React native button click render different components

Question

I am using Expo React native for my app. I have created three buttons. When user will click the button it will fetch data and render it in one screen. Each button will button will fetch different api. Under the buttons there will be flatlist, where it will display the data. I can do with one button click display the data but I could not figure how to display other buttons api. I share my code in codesandbox. ps: Below code make this app get super slow

This is my code

import React from 'react';
import { Text, View, ScrollView } from 'react-native';
import styled from 'styled-components';
import PressableButton from './Button';
import axios from 'axios';
const api = "https://jsonplaceholder.typicode.com/users";
const anApi = "https://jsonplaceholder.typicode.com/photos"

const Data = ({ data }) => {

  return (
    <View style={{ flex: 1 }}>
      <Text>{JSON.stringify(data, null, 4)}</Text>
    </View>
  )
}
const AnData = ({ andata }) => {
  return (
    <View style={{ flex: 1 }}>
      <Text>{JSON.stringify(andata, null, 1)}</Text>
    </View>
  )
}

export default function App() {
  const [data, setData] = React.useState([]);
  const [anotherdata, setanotherData] = React.useState([]);


  const updateState = async () => {
    await axios(api)
      .then((res) => {
        setData(res.data);
      })
      .catch((err) => {
        console.log("failed to catch", err);
      });
  };

  const anoThereState = async () => {
    await axios(anApi)
      .then((res) => {
        setanotherData(res);
      })
      .catch((err) => {
        console.log("failed to catch", err);
      });
  };

  return (
    <React.Fragment>
      <Container>
        <PressableButton onPress={updateState} title='First button' bgColor='#4267B2' />
        <PressableButton onPress={anoThereState} title='Second button' bgColor='lightblue' />
        <PressableButton onPress={() => true} title='Third button' bgColor='#4267B2' />
      </Container>
      <Scroll>
        {data && data === undefined ? <Text>loading</Text> : <Data data={data} />}
        {anotherdata && anotherdata === undefined ? <Text>loading</Text> : <AnData andata={anotherdata} />}
      </Scroll>
    </React.Fragment>
  );
}

const Container = styled.View`

 flex-direction: row;
 justify-content: center;
 padding: 70px 0px 20px 0px;
`;

const Scroll = styled.ScrollView`
flex: 1;
`

question from:https://stackoverflow.com/questions/65901064/react-native-button-click-render-different-components

Answer 1

Under the buttons there will be flatlist

You're not using FlatList, only showing response in text and the data for second button is huge that's why It's super slow.

Here are the changes I made, check if this is what you're looking for?

Also if you want one data to show at a time you can either use tabs or show/hide the data depending on selection like I've done in code.