¿Cómo crear un componente de calificación en ReactJS?

El siguiente enfoque cubre cómo crear un componente de calificación en React JS.

Requisito previo:

• Conocimientos básicos de npm y comando create-react-app.
• Conocimiento básico de componentes con estilo.
• Conocimiento básico de los ganchos useState() React.

Configuración básica: Comenzará un nuevo proyecto usando el comando create-react-app :

npx create-react-app react-rating

Ahora vaya a su carpeta de calificación de reacción escribiendo el comando dado en la terminal.

cd react-rating

Módulo requerido: Instale las dependencias requeridas en este proyecto escribiendo el comando dado en la terminal.

npm install --save styled-components
npm install --save react-icons

Ahora cree la carpeta de componentes en src, luego vaya a la carpeta de componentes y cree dos archivos Rating.js y RatingStyles.js .

Estructura del proyecto: La estructura de archivos en el proyecto se verá así.

Ejemplo: En este ejemplo, diseñaremos un componente de calificación, para eso necesitaremos manipular el archivo App.js y otros archivos de componentes creados.

Creamos un estado con el primer elemento rate como estado inicial con un valor de 0 y el segundo elemento como función setRate() para actualizar el estado. Los números de índice que van del 0 al 4 se asignan con la adición de 1 a la variable giveRating recién inicializada . Mientras mapeamos la array usando el método Map() , asociamos el valor de la variable giveRating con cada uno de los cinco botones de opción (por ejemplo, 1 para el primer botón y así sucesivamente).

Actualizamos el valor del estado con la ayuda de la función onClick que establece su valor igual a giveRating cada vez que se llama. Por ejemplo, si hacemos clic en la cuarta estrella (desde la izquierda), sabemos que el valor de la calificación dada asociada con esta estrella (o botón de radio) es 4. Este valor de 4 se asigna a nuestro estado. Ahora entra en juego el papel del operador condicional. Solo se seleccionan (o cambian de color) los botones de opción que tienen un valor igual o inferior a 4. Como resultado, obtenemos una calificación de cuatro estrellas.

import React, { useState } from "react";
import { FaStar } from "react-icons/fa";
import { Container, Radio, Rating } from "./RatingStyles";
const Rate = () => {
  const [rate, setRate] = useState(0);
  return (
    <Container>
      {[...Array(5)].map((item, index) => {
        const givenRating = index + 1;
        return (
          <label>
            <Radio
              type="radio"
              value={givenRating}
              onClick={() => {
                setRate(givenRating);
                alert(`Are you sure you want to give ${givenRating} stars ?`);
              }}
            />
            <Rating>
              <FaStar
                color={
                  givenRating < rate || givenRating === rate
                    ? "000"
                    : "rgb(192,192,192)"
                }
              />
            </Rating>
          </label>
        );
      })}
    </Container>
  );
};
  
export default Rate;

import styled from 'styled-components';
  
export const Container = styled.div`
   display: flex;
   justify-content: center;
   align-items: center;
   min-height: 60vh;
   font-size: 60px;
`
export const Radio = styled.input`
   display: none;
`
export const Rating = styled.div`
   cursor: pointer;
`

import './App.css';
import Rating from './components/Rating';
  
function App() {
  return (
     <Rating />
  );
}
  
export default App;

Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:

npm start

Salida: Ahora abra su navegador y vaya a http://localhost:3000/ , verá la siguiente salida: