javascript - How to render a specific number of elements in React

Question

I'm new to React so sorry if this is a silly question. I am trying to figure out how to display a specific number of these elements created with the functions in my code below. I've researched this an have seen that most people are using an array but I've not been able to make that work, perhaps because of some way my jsx is formatted. Any help is greatly appreciated! Thanks!

covers.js

import React from 'react';
import { videos } from '../../data/videos.json';
import styles from './covers.module.sass';

export const Covers = () => (
  <div>
    {videos.map((data, key) => {
        return (
            <Cover 
              key={key}
              cover={data.cover}
              title={data.title}
              subtitle={data.subtitle}
              description={data.description}
            />
        );
      })}
  </div>
);

const Cover = ({title, subtitle, description, cover}) => {
  return (
    <div className={styles.coverContainer}>
      <img src={cover} alt={title + "cover image"} className={styles.coverImage} />
      <div className={styles.coverWordsContainer}>
        <h1 className={styles.coverTitle}>{title}</h1>
        <h2 className={styles.coverSubtitle}>{subtitle}</h2>
        <p className={styles.coverDescription}>{description}</p>
      </div>
    </div>
  );
};

export default Covers;

Answer 1

You can try to show the videos data to us。

import { videos } from '../../data/videos.json'

The videos data format may be have some error。