¿Cómo agregar entrada de etiqueta en NextJS?

En este artículo, vamos a aprender cómo podemos agregar entradas de etiquetas en NextJS. NextJS es un marco basado en React. Tiene el poder de desarrollar hermosas aplicaciones web para diferentes plataformas como Windows, Linux y Mac.

Enfoque: para agregar nuestra entrada de etiqueta, vamos a utilizar el paquete react-tag-input-component. El paquete react-tag-input-component nos ayuda a integrar la entrada de etiquetas en nuestra aplicación. Primero, instalaremos el paquete react-tag-input-component y luego agregaremos una entrada de etiqueta en nuestra página de inicio.

Crear aplicación NextJS: puede crear un nuevo proyecto NextJs usando el siguiente comando:

npx create-next-app gfg

Instale el paquete requerido: Ahora instalaremos el paquete react-tag-input-component usando el siguiente comando:

npm i react-tag-input-component

Estructura del proyecto: Se verá así.

Agregar la entrada de etiqueta: después de instalar el paquete, podemos agregar fácilmente una entrada de etiqueta en cualquier página de nuestra aplicación. Para este ejemplo, vamos a agregar una entrada de etiqueta a nuestra página de inicio.

Agregue el siguiente contenido en el archivo index.js :

import React, { useState } from "react"; 
import { TagsInput } from "react-tag-input-component"; 
  
export default function TagInput(){
  const [selected, setSelected] = useState(["gfg"]);
  return (
    <div>
      <h1>NextJs Tag Input - GeeksforGeeks</h1>
      <div>
      <h1>Add Tags</h1>
      <pre>{JSON.stringify(selected)}</pre>
      <TagsInput
        value={selected}
        onChange={setSelected}
        name="tags"
        placeHolder="tags"
      />
      <em>Enter tags</em>
      </div>
    </div>
  );
};

Explicación: en el ejemplo anterior primero, estamos importando el componente TagsInput y el gancho useState de reaccionar. Luego estamos usando el enlace useState para almacenar el valor de la etiqueta. Después de eso, estamos agregando nuestra entrada de etiquetas usando el paquete instalado.

Pasos para ejecutar la aplicación: Ejecute el siguiente comando en la terminal para ejecutar la aplicación.

npm run dev

Producción: