Mapping a sub-component within a child-component repeatedly through an array returned by API

Question

I'm having a problem with mapping components. Frankly, I'm not experienced enough with React to code like a God. I'll walk you through my problem in increments so you guys fully understand what's happening.

Annex 1.1 This is my child component, as you can see, I am using React useState and useEffect hooks to update my state when I pull an array from an API. No big deal, no problem here, just regular stuff.

function Financeticker() {

const [crypto, setCrypto] = useState([]);
const classes = useStyles();

useEffect(() => {
    axios
        .get(
            `https://min-api.cryptocompare.com/data/top/totalvolfull?limit=10&tsym=USD&api_key=xxxxxxxxxxxxxxxxxxxx`
        )
        .then((resCrypto) => {
            console.log(resCrypto.data.Data);
            setCrypto(resCrypto.data.Data);
        })
        .catch((err) => {
            console.log(err);
        });
}, []);

Annex 1.2 Here is a function that functions as a subcomponent (fetus component, lol jk) in my child component. If it gets confusing, you'll probably understand at Annex 1.3 but basically the response of the API returns an array of [10] objects. Now, I want the subcomponent to render 10 times (using .map) and pull each property from the API (I.E. {crypto.CoinInfo.FullName}) The problem is that I get an error stating "Cannot read property "FullName" of undefined.

const cryptoTicker = crypto.map(() => (
        <Grid item xs={12}>
            <Card className={classes.root}>
                <CardContent>
                    <Typography
                        className={classes.companyName}
                        color='textSecondary'
                        gutterBottom
                    >
                        {crypto.CoinInfo.FullName} <---- CANNOT READ PROPERTY "FULLNAME" OF UNDEFINED
                    </Typography>
                </CardContent>
            </Card>
        </Grid>
    ));

Annex 1.3 Here is the child component's return method that basically calls the {cryptoTicker}function within the Ticker component. In effect, we are doing; Step 1: Pulling data from an API. Step 2: rendering subcomponent X amount of times (in this case, 10 times) within the Ticker child component. Step 2.1: pulling that data from the array returned by the API and plonking the data down on the subcomponent.

    return <Ticker>{({ index }) => <>{cryptoTicker}</>}</Ticker>;
}

export default Financeticker;

I hope this question was structured well enough to get an answer. Thanks dev community

Gh05d · Accepted Answer · 2020-10-04 15:28:17Z

1

Well, you are mapping over an array, but you never specified the item. The problem is here in the first line:

const cryptoTicker = crypto.map(() => (

Change this to

const cryptoTicker = crypto.map((item) => (

Then you should be able to display the name like this:

    {item.CoinInfo.FullName}

Full code:

const cryptoTicker = crypto.map((item) => (
        <Grid item xs={12}>
            <Card className={classes.root}>
                <CardContent>
                    <Typography
                        className={classes.companyName}
                        color='textSecondary'
                        gutterBottom
                    >
                        {item.CoinInfo.FullName} <---- CANNOT READ PROPERTY "FULLNAME" OF UNDEFINED
                    </Typography>
                </CardContent>
            </Card>
        </Grid>
    ));

I am making an educated guess, but I think that you had the problem at all, was that you had no loading state and so on the first render, crypto was an empty array, but you tried to access a property of it, as it was an object.

edited Oct 4, 2020 at 15:28

answered Oct 4, 2020 at 15:18

Gh05d

9,08211 gold badges42 silver badges84 bronze badges

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

11 Comments

Pacholoamit Over a year ago

Woah, that worked. However, I'm currently rendering 10 components. I have an image here It's currently rendering 10 child components each with 1 subcomponent. I'm trying to render 1 child components with 10 subcomponents. Is there any flaw in my programming logic?

Pacholoamit Over a year ago

and I can't believe I didn't see the .map argument was empty. Damn.

Pacholoamit Over a year ago

I finally solved it. Instead of calling cryptoTicker directly. I basically created another object which contains the map function originally from cryptoTicker. cryptoTicker would only content the grid components and would call cryptoContent which is the object that contained the map function. In effect, <Ticker> would call cryptoTicker and cryptoTicker would call cryptoContent needless to say, staring at the codebase for 3 days in 6 hour increments did its job lol

Gh05d Over a year ago

Good Job. >staring at the codebase for 3 days in 6 hour increments did its job lol Yeah, that is what coding is all about ;-) At least in the beginning, it goes down to 2 days with 4 hour increments in time :-)

Pacholoamit Over a year ago

HAHAHAHA. Yep. I'm really passionate about coding. I'm really thankful to stack overflow and the supportive dev community for helping newbies out. Thanks again for answering my query.

|

Collectives™ on Stack Overflow

Mapping a sub-component within a child-component repeatedly through an array returned by API

1 Answer 1

11 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

11 Comments

Your Answer

Sign up or log in

Post as a guest

Related