PeliculaGrid

Overview

PeliculaGrid is a container component that renders a responsive grid of PeliculaCard components. It handles loading states and empty results scenarios.

Import

import PeliculaGrid from '../components/PeliculaGrid';

Props

peliculas

array

required

Array of movie objects to display in the grid. Each movie object should contain all properties required by PeliculaCard.

boolean

required

Indicates whether movies are currently being loaded/filtered. When true, displays a loading spinner instead of the grid.

Component Signature

const PeliculaGrid = ({ peliculas, loading }) => { ... }

Conditional Rendering

Loading State

When loading is true, renders the LoadingSpinner component:

if (loading) {
  return <LoadingSpinner />;
}

Empty State

When the peliculas array is empty or null, displays an empty state message:

if (!peliculas || peliculas.length === 0) {
  return (
    <div className="pelicula-grid__empty">
      <p className="pelicula-grid__empty-text">No se encontraron películas</p>
    </div>
  );
}

Grid State

When movies are available, renders them in a grid layout:

<div className="pelicula-grid">
  {peliculas.map(pelicula => (
    <PeliculaCard key={pelicula.id} pelicula={pelicula} />
  ))}
</div>

Usage Example

With Hook
With Static Data

import React from 'react';
import PeliculaGrid from '../components/PeliculaGrid';
import usePeliculaSearch from '../hooks/usePeliculaSearch';

const PeliculasPage = () => {
  const { filteredPeliculas, loading } = usePeliculaSearch();

  return (
    <div>
      <h1>Catálogo de Películas</h1>
      <PeliculaGrid peliculas={filteredPeliculas} loading={loading} />
    </div>
  );
};

import React from 'react';
import PeliculaGrid from '../components/PeliculaGrid';
import { mockPeliculas } from '../data/mockPeliculas';

const StaticGrid = () => {
  return <PeliculaGrid peliculas={mockPeliculas} loading={false} />;
};

Behavior Flow

CSS Classes

.pelicula-grid - Main grid container
.pelicula-grid__empty - Empty state container
.pelicula-grid__empty-text - Empty state message text

Dependencies

react - Core React library
PeliculaCard - Individual movie card component
LoadingSpinner - Loading indicator component

Performance Considerations

Uses pelicula.id as the React key for optimal reconciliation
No internal state management - purely presentational
Efficient re-rendering based on prop changes only

Source Location

src/components/PeliculaGrid.jsx:5

Hooks

Components

Data

Overview

Import

Props

Component Signature

Conditional Rendering

Loading State

Empty State

Grid State

Usage Example

Behavior Flow

CSS Classes

Dependencies

Performance Considerations

Source Location

Build docs developers (and LLMs) love

Hooks

Components

Data

​Overview

​Import

​Props

​Component Signature

​Conditional Rendering

​Loading State

​Empty State

​Grid State

​Usage Example

​Behavior Flow

​CSS Classes

​Dependencies

​Performance Considerations

​Source Location

Build docs developers (and LLMs) love

Overview

Import

Props

Component Signature

Conditional Rendering

Loading State

Empty State

Grid State

Usage Example

Behavior Flow

CSS Classes

Dependencies

Performance Considerations

Source Location