Array.map() doesn't render React component

Question

I am having a problem where i'm trying to render pass an array's data to a card component but it doesn't appear on the page, the card component renders normally on its own:

import React, { Component } from 'react'
import { Container, Grid, Card, Segment, Header } from 'semantic-ui-react';
import ArticleCard from './ArticleCard';


export default class NewsGrid extends Component {
    render() {
        const {News} = this.props
        console.log(News)

        return (
            <div>
                <Container style={{marginTop: '7%'}}>
                <Grid stackable divided >
                    <Grid.Column style={{width: '66.66%'}}>
                        <Card.Group>
                            {
                                News.map(({id, ...otherArticleProps}) => (
                                    <ArticleCard key={id} {...otherArticleProps} />
                                ))
                            }
                        </Card.Group>
                    </Grid.Column>

                </Grid>
            </Container>
            </div>
        )
    }
}

console.log() shows that the data is actually there

and i'm passing the array as props from the parent page component, the data is delivered through the flamelink API in useEffect as shown bellow:

import React, { useEffect, useState } from 'react';
import NewsGrid from '../components/NewsGrid';
import BusinessContainer from '../components/BusinessContainer';
import PolitiqueContainer from './../components/PolitiqueContainer';
import app from '../Firebase';
import { withRouter } from 'react-router-dom';

const Homepage = () => {
    const [News] = useState([])
    const [Business] = useState([])
    const [Politique] = useState([])
    const [Opinion] = useState([])
    const [Blog] = useState([])

    useEffect(() => {
        app.content.get({schemaKey: 'articles',
                        fields: ['title', 'author', 'date', 'thumbnail', 'slug', 'summary', 'category', 'id'],
                        orderBy:{field: 'date',
                        order: 'desc'},
                         })
        .then(articles => {
            for(var propName in articles) {
                const propValue = articles[propName]

                switch(propValue.category) {
                    default :
                        break;
                    case 'News': 
                        News.push(propValue)
                        break;
                    case 'Business': 
                        Business.push(propValue)
                        break;
                    case 'Politique': 
                        Politique.push(propValue)
                        break;
                    case 'Opinion': 
                        Opinion.push(propValue)
                        break;
                    case 'Blog': 
                        Blog.push(propValue)
                        break;

                }
            }
        })
    })


    return (
        <div >
            <NewsGrid  News={News} Opinion={Opinion} Blog={Blog} />
            <BusinessContainer  content={Business} />
            <PolitiqueContainer  content={Politique} />

        </div>
    );
};

export default withRouter(Homepage);

I am using firebase as a backend combined with Flamelink for the CMS. Thanks in advance.

you should not mutate state in React, useState provides a second argument that you can use to change state — Agney
– Agney, Commented Feb 14, 2020 at 18:04

curtisupshall · Accepted Answer · 2020-02-14 18:39:13Z

6

When you use const [News] = React.useState([]), any changes you make to News will not be reflected in your React application, since mutating News will not update the state of your component. If you want to update the state of News, you need to use the state dispatch function provided by React.useState. Try this instead:

const [News, updateNews] = React.useState([])

// We can't use News.push('Some news'), but we can update News this way:
updateNews([...News, 'Some news'])

edited Feb 14, 2020 at 18:39

answered Feb 14, 2020 at 18:07

curtisupshall

3963 silver badges18 bronze badges

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

1 Comment

mhodges Over a year ago

While this explanation is not technically accurate, this would solve the problem, and is the correct way to use react hooks. News is mutable, as neither the const keyword nor react enforce immutability, but the state will not update and re-render the component without calling the hook method to update that piece of state, or setState

Constantin · Accepted Answer · 2020-02-14 19:01:52Z

    import React, { useEffect, useState } from 'react';
    import NewsGrid from '../components/NewsGrid';
    import BusinessContainer from '../components/BusinessContainer';
    import PolitiqueContainer from './../components/PolitiqueContainer';
    import app from '../Firebase';
    import { withRouter } from 'react-router-dom';

    const Homepage = () => {
      const [news, setNews] = useState([]);
      const [business, setBusiness] = useState([]);
      const [politique, setPolitique] = useState([]);

  const [opinion, setOpinion] = useState([]);
  const [blog, setBlog] = useState([]);

  useEffect(() => {
    app.content
      .get({
        schemaKey: 'articles',
        fields: ['title', 'author', 'date', 'thumbnail', 'slug', 'summary', 'category', 'id'],
        orderBy: { field: 'date', order: 'desc' },
      })
      .then(articles => {
        for (let propName in articles) {
          const propValue = articles[propName];

          switch (propValue.category) {
            case 'News':
              setNews(propValue);
              break;
            case 'Business':
              setBusiness(propValue);
              break;
            case 'Politique':
              setPolitique(propValue);
              break;
            case 'Opinion':
              setOpinion(propValue);
              break;
            case 'Blog':
              setBlog(propValue);
              break;
            default:
                break;
          }
        }
      });
  }, []);

  return (
    <div>
      <NewsGrid News={news} Opinion={opinion} Blog={blog} />
      <BusinessContainer content={business} />
      <PolitiqueContainer content={politique} />
    </div>
  );
};

export default withRouter(Homepage);

I would suggest using camel case variables:

const [stateVariable, setStateVariable] = useState();

(https://reactjs.org/docs/hooks-state.html) and to add the [] to the useEffect array of dependencies. This will ensure that the useEffect will trigger only a single time. Hope that this helps.

Collectives™ on Stack Overflow

Array.map() doesn't render React component

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related