Answer a question

So this my movies.js component and i wanted to pass the data movies to my other component where i want to display the data on cards but i dont know how to use the promise function :

 const movies = [
  {
    id: '1',
    title: 'Oceans 8',
    category: 'Comedy',
    likes: 4,
    dislikes: 1
  }, {
    id: '2',
    title: 'Midnight Sun',
    category: 'Comedy',
    likes: 2,
    dislikes: 0
  },
]

export const movies$ = new Promise((resolve, reject) => setTimeout(resolve, 100, movies))

This is my other component where i want to display on cards i tried to import the const movie$ but it didn't work:

import React, { Component } from "react";

import { Card, Button } from "react-bootstrap";

import { movies$ } from "../Data/movies";

export default class Movies extends Component {
  render() {
    return (
      <div>
          <h1>Movies</h1>
        <Card style={{ width: "18rem" }}>
          <Card.Img variant="top" src="holder.js/100px180" />
          <Card.Body>
            <Card.Title> 
              <movies$
                
              />
            </Card.Title>
            <Card.Text>
              Some quick example text to build on the card title and make up the
              bulk of the card's content.
            </Card.Text>
            <Button variant="primary">Supprimer</Button>
          </Card.Body>
        </Card>
      </div>
    );
  }
} 

Answers

You don't need a promise. To display data from array use the map() function

movies.js

const movies = [
  {
    id: "1",
    title: "Oceans 8",
    category: "Comedy",
    likes: 4,
    dislikes: 1
  },
  {
    id: "2",
    title: "Midnight Sun",
    category: "Comedy",
    likes: 2,
    dislikes: 0
  }
];

export default movies;

App.js

import React, { Component } from "react";
import { Card, Button } from "react-bootstrap";

import movies from "./movies";

export default class Movies extends Component {
  render() {
    return (
      <div>
        <h1>Movies</h1>

        {/* map function below */}
        {movies.map(movie => (
          <Card key={movie.id} style={{ width: "18rem" }}>
            <Card.Img variant="top" src="holder.js/100px180" />
            <Card.Body>
              <Card.Title>{movie.title}</Card.Title>
              <Card.Text>
                Some quick example text to build on the card title and make up
                the bulk of the card's content.
              </Card.Text>
              <Button variant="primary">Supprimer</Button>
            </Card.Body>
          </Card>
        ))}

      </div>
    );
  }
}

Demo: stackblitz