Skip to main content

​
Overview

AlquilerButton (exported as RentalButton in source) is a button component that handles movie rental transactions. It displays the rental price, simulates a processing delay, and provides feedback to the user.

​
Import

import RentalButton from '../components/AlquilerButton';
// Note: Component is internally named RentalButton

​
Props

​
pelicula
object
required
Movie object containing rental informationRequired properties:
  • title (string): Movie title (used in confirmation message)
  • alquilerPrecio (number): Rental price in currency units
​
onRent
function
required
Callback function invoked when the rental process completesSignature: (pelicula: object) => voidParameters:
  • pelicula (object): The movie object that was rented

​
Component Signature

const RentalButton = ({ pelicula, onRent }) => { ... }

​
Internal State

​
isRenting
boolean
Tracks whether a rental transaction is in progress. When true, the button displays “Procesando…” and is disabled.

​
Features

​
Simulated Transaction

Simulates a 500ms rental processing delay: 
const handleRent = () => {
  setIsRenting(true);
  
  // Simular proceso de alquiler
  setTimeout(() => {
    onRent(pelicula);
    setIsRenting(false);
    alert(`Has alquilado ${pelicula.title} por S/ ${pelicula.alquilerPrecio} por 48 horas`);
  }, 500);
};

​
Loading State

Button text and disabled state change during processing: 
<button 
  className="alquiler-button"
  onClick={handleRent}
  disabled={isRenting}
>
  {isRenting ? 'Procesando...' : `Alquilar por S/ ${pelicula.alquilerPrecio}`}
</button>

​
User Feedback

Displays an alert with rental confirmation: 
alert(`Has alquilado ${pelicula.title} por S/ ${pelicula.alquilerPrecio} por 48 horas`);

​
Usage Example

import React, { useState } from 'react';
import RentalButton from '../components/AlquilerButton';

const PeliculaDetailPage = () => {
  const [alquileres, setAlquileres] = useState([]);
  
  const pelicula = {
    id: 1,
    title: "Inception",
    alquilerPrecio: 3.99
  };

  const handleRent = (rentedPelicula) => {
    const newAlquileres = [
      ...alquileres, 
      { 
        ...rentedPelicula, 
        alquilerDate: new Date().toISOString() 
      }
    ];
    setAlquileres(newAlquileres);
    localStorage.setItem('alquileres', JSON.stringify(newAlquileres));
  };

  return (
    <div>
      <h1>{pelicula.title}</h1>
      <RentalButton pelicula={pelicula} onRent={handleRent} />
    </div>
  );
};

​
Rendered Structure

<button 
  className="alquiler-button"
  onClick={handleRent}
  disabled={isRenting}
>
  {isRenting ? 'Procesando...' : 'Alquilar por S/ 3.99'}
</button>

​
Button States

StateTextDisabledBehavior
IdleAlquilar por S/ {price}falseClickable, starts rental
ProcessingProcesando...trueNot clickable, rental in progress

​
Rental Flow

​
CSS Classes

  • .alquiler-button - Main button element

​
Currency Format

The component uses Peruvian Soles (S/) in the button text and alert message: 
`Alquilar por S/ ${pelicula.alquilerPrecio}`
`Has alquilado ${pelicula.title} por S/ ${pelicula.alquilerPrecio} por 48 horas`

​
Rental Duration

The alert message indicates a 48-hour rental period (hardcoded in the alert).

​
Source Location

src/components/AlquilerButton.jsx:3

Build docs developers (and LLMs) love

Get started for freeTalk to us