How to Add Bootstrap Tags Input

Question

Iam cuurently working on a notes application and i want the user to provide tags for their note but i am not sure how i can do it , please help; and also one of the css is effecting all my bootstrap css, And it would be great i dont have to use Jquery Pls Help

This is my code;

i want the tag input in the 3rd div inside the form

import React from "react";
import { useContext } from "react";
import { useState } from "react";
import { useEffect } from "react";
import noteContext from "../context/notes/noteContext";
// import $ from 'jquery'
import "../addNote.css";
import Tags from "./Tags";
import { Helmet } from "react-helmet";

const AddNote = () => {
  useEffect(() => {
    const script = document.createElement("Script");

    script.src = "../script.js";

    document.body.appendChild(script);

    return () => {
      document.body.removeChild(script);
    };
  });

  const context = useContext(noteContext);
  const { addNote } = context;

  const [note, setNote] = useState({
    title: "",
    description: "",
    msg: "",
    tag: "",
  });

  const handleClick = (e) => {
    e.preventDefault();
    addNote(note.title, note.description, note.msg, note.tag);
  };

  const onChange = (e) => {
    setNote({
      ...note,
      [e.target.name]: e.target.value === "" ? "----" : e.target.value,
    });
  };

  return (
    <>
      <div className="container my-3">
        <h2>Add a Note</h2>
        <form id="form-id" className="my-3">
          <div className="mb-3">
            <label htmlFor="title" className="form-label">
              Title
            </label>
            <input
              type="text"
              className="form-control"
              id="title"
              name="title"
              aria-describedby="emailHelp"
              onChange={onChange}
            />
          </div>
          <div className="mb-3">
            <label htmlFor="description" className="form-label">
              Description
            </label>
            <input
              type="text"
              className="form-control"
              id="description"
              name="description"
              onChange={onChange}
            />
          </div>
          <div className="mb-3">
            <label htmlFor="msg" className="form-label">
              Note Message
            </label>
            <input
              type="text"
              className="form-control"
              id="msg"
              name="msg"
              onChange={onChange}
            />
          </div>
          <div className="mb-3">
            **// This is the place where i want the tags input**
          </div>
          <div className="mb-3 form-check">
            <input
              type="checkbox"
              className="form-check-input"
              id="exampleCheck1"
            />
            <label className="form-check-label" htmlFor="exampleCheck1">
              Check me out
            </label>
          </div>
          <button
            type="submit"
            className="btn btn-primary"
            onClick={handleClick}
          >
            Add Note
          </button>
        </form>
      </div>
      <script src="../script.js"></script>
    </>
  );
};

export default AddNote;

Answer 1

To allow users to provide tags for their notes in your application without using jQuery, you can utilize React's state management to handle the tag input and storage.

In your note creation form/component, add an input field where users can enter tags. You can use an HTML input element or a React UI library component for better styling and functionality.

Create a state variable in your component to store the tags entered by the user. You can use the useState hook from React to manage the state. Initialize the state with an empty array.

import React, { useState } from 'react';
import 'bootstrap/dist/css/bootstrap.min.css'; // Bootstrap styles   

function AddNote() {
  const [tags, setTags] = useState([]);

  // Rest of the component code

  return (
    <form>
      {/* Other form fields */}
      <input type="text" value={tags} onChange={handleTagsChange} />
      {/* Other form elements */}
    </form>
  );
}

Implement the handleTagsChange function to update the tags state whenever the input field value changes.

function handleTagsChange(event) {
  const newTags = event.target.value.split(','); // Assuming tags are comma-separated
  setTags(newTags);
}

To display the entered tags, you can map over the tags array and render individual tags as separate elements. You can style them as per your application's design.

return (
  <div>
    {/* Other note content */}
    <div>
      {tags.map((tag, index) => (
        <span key={index} className="badge bg-primary">{tag}</span>
      ))}
    </div>
  </div>
);

tags state variable output example: