News Section

this component gathers the news items (cards) and organizes them according to the category they fit.

In this component we use the props from the parent component <content /> or <GuestContent /> to choose the correct data to use in every section.

I used an if-else statement to get that done, as shown in this snippet

if (props.name === 'Most Read') {
      return(
        MrData.map(tile => (  
              <GridListTile key={tile.img}>
                <Link href={tile.link} target="_blank" rel="noopener" className={classes.wrapper}>
                  <img src={tile.img} alt={tile.title} className={classes.image} />
                  <p className={classes.text}> {tile.title} </p> 
                  <GridListTileBar
                    title={tile.title}
                    subtitle={<span>by: {tile.author}</span>}
                    actionIcon={
                      <IconButton aria-label={`add ${tile.title} to favorite`} className={classes.icon}>
                        <FavoriteIcon />
                      </IconButton>
                    }
                  />
                </Link>
              </GridListTile>
              
            ))
      )

I used a function renderSection() inside the main function NewsSection(props) , because the if-else statment can not be used to return different elements in the main function "using more than one return statement".