Load component after api is fetched

Question

I am fetching json from API and then I want to display the component

 const [jsonCat, setjsonCat] = useState([]);
  
 useEffect(() => {
    refreshCat();
  }, []);
    
 const refreshCat = async () => {
        try {
          console.log("refreshing categories");
          setjsonCat([]);
    
          getCat().then((response) => {
            setjsonCat(response);
          });
        } catch (e) {
          console.log(e);
        }
      };
    
 const CarousalLoop = (props) => {
            const BANNER_Hs = 1;
        
            if (jsonCat.length == 0) {
              return <View></View>;
            }
         
            const listItemstest = jsonCat.map((link) => {
              console.log(link.name);
              <View>
                <Text style={{ color: "red" }}>{link.name}</Text>
              </View>;
            });
            return (
              <View style={{ height: 220, backgroundColor: "brown" }}>
                {listItemstest}
              </View>
            );
          };

And Finally my render component has

{jsonCat.length ? <CarousalLoop /> : <ActivityIndicator />}

When I run this code , Activity indicator is shown until API request is fetched and then json is also received properly , console.log(link.name) is printing the names correctly but CarousalLoop is displayed without any listitems (just brown view component is shown) .

akhtarvahid · Accepted Answer · 2021-07-04 09:02:09Z

1

Either you use return keyword

const listItemstest = jsonCat.map((link) => {
         console.log(link.name);
         return(
               <View>
                <Text style={{ color: "red" }}>{link.name}</Text>
               </View>
              )
            });

Or wrap in parenthesis

      const listItemstest = jsonCat.map((link) => (
              <View>
                <Text style={{ color: "red" }}>{link.name}</Text>
              </View>;
            ));

answered Jul 4, 2021 at 9:02

akhtarvahid

9,7992 gold badges30 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ravvis · Accepted Answer · 2021-07-04 08:37:12Z

1

You need to return the list of items to render from listItemstest, like this.

const listItemstest = jsonCat.map((link) => {
              console.log(link.name);
              return <View>
                <Text style={{ color: "red" }}>{link.name}</Text>
              </View>;
            });

answered Jul 4, 2021 at 8:37

ravvis

1451 silver badge4 bronze badges

1 Comment

ravvis Over a year ago

The return keyword is important - without that, you are just returning a list of undefineds.

Collectives™ on Stack Overflow

Load component after api is fetched

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related