0

I'm new to this programming world. Can anyone please help me on this.

I have implemented Material UI's tabs successfully by hard-coding the content, but when I tried to make my hard coded tabs with a .map function to populate the content from a data source (json), it no longer works. The tab displays nothing.

Here are the codes,

Planet component:

import React from 'react';

function Planet(props) {

    return (
        <ul>
            <li>{props.name}</li>
        </ul>
    );
}

export default Planet;

Planets component:

import React, { useEffect, useState} from 'react';
import Planet from './Planet';

function Planets(props) {

    const [planets, setPlanets] = useState([]);
    
    useEffect(() => {
        getPlanets();
    }, []);

    const getPlanets = async () => {
        const response = await fetch("https://assignment-machstatz.herokuapp.com/planet");
        const data = await response.json();
        setPlanets(data); 
    }

    return (
        <div>
            {planets.map((planet, index) => {
                return (
                <Planet key={index} name={planet.name} />
                );
        })} 
        </div>
    );

}

export default Planets;

App component:

import React, { useState } from 'react';
import { AppBar, Tabs, Tab } from '@material-ui/core';
import Planet from './Planet';
import Favplanets from './Favplanets';

function App() {

    const [selectedTab, setSelectedTab] = useState(0);

    function handleChange (event, newValue) {
        setSelectedTab(newValue);
    }

    return (
        <>
            <AppBar position="static">
            <Tabs value={selectedTab} onChange={handleChange} >
            <Tab label="Planets" />
            <Tab label="Favourite Planets" />
            </Tabs>
        </AppBar>
        {selectedTab === 0 && <Planet />}
        {selectedTab === 1 && <Favplanets />}
        </>
    );
}

export default App;

Thanks for your help!

Suhas
  • 1
  • Have you tried checking planets length before mapping? – Ronak Lalwani Dec 25 '20 at 04:04
  • yes. the length of planets array is 11. – Suhas Dec 25 '20 at 04:14
  • I mean have tried doing this: planet.length ? planets.map(....) : null Instead of mapping directly – Ronak Lalwani Dec 25 '20 at 04:16
  • No. I haven't. Thanks, I will try that. – Suhas Dec 25 '20 at 04:24
  • In App.js component you're importing ./Planet, and rendering {selectedTab === 0 && }, I think it should be component ? can you verify – Sudhanshu Kumar Dec 25 '20 at 04:26
  • ya, I'm rendering as to capture the data that I'm passing from using props. I'm trying to display the data from as list items on . – Suhas Dec 25 '20 at 05:09
  • It will never work actually because inside App.js component you're importing ./Planet, and rendering {selectedTab === 0 && } .This Planet is getting data from Planets,and since you havent called Planets ever you will never get the data. – Sakshi Dec 25 '20 at 06:45
  • Inside Planet component it needs props like `name` ,and when you are calling it from App.js you are not passing any name props to it so it will never display anything. – Sakshi Dec 25 '20 at 06:45
  • 1
    thanks. I tried fetching the API data from and mapping the data into the same component itself. It worked. Thanks for guiding me. – Suhas Dec 25 '20 at 07:09

0 Answers0