javascriptnext.jssocial-networking

how to fix react/no-unescaped-entities


error

./components/SingleServer.js 144:36 Error: " can be escaped with ", “, ", ”. react/no-unescaped-entities 144:44 Error: " can be escaped with ", “, ", ”. react/no-unescaped-entities 150:27 Error: ' can be escaped with ', ‘, ', ’. react/no-unescaped-entities 150:32 Error: ' can be escaped with ', ‘, ', ’. react/no-unescaped-entities 151:33 Error: ' can be escaped with ', ‘, ', ’. react/no-unescaped-entities 151:40 Error: ' can be escaped with ', ‘, ', ’. react/no-unescaped-entities 152:26 Error: ' can be escaped with ', ‘, ', ’. react/no-unescaped-entities 152:37 Error: ' can be escaped with ', ‘, ', ’. react/no-unescaped-entities 153:31 Error: " can be escaped with ", “, ", ”. react/no-unescaped-entities 153:53 Error: " can be escaped with ", “, ", ”. react/no-unescaped-entities 153:65 Error: " can be escaped with ", “, ", ”. react/no-unescaped-entities 153:89 Error: " can be escaped with ", “, ", ”. react/no-unescaped-entities 154:23 Error: ' can be escaped with ', ‘, ', ’. react/no-unescaped-entities 154:35 Error: ' can be escaped with ', ‘, ', ’. react/no-unescaped-entities

code i have written->

import { Fragment, useRef, useState } from 'react';
import { Dialog, Transition } from "@headlessui/react";
import { ExclamationIcon } from "@heroicons/react/solid";
import { ExclamationTriangleIcon } from '@heroicons/react/24/outline';
import { LinkIcon } from "@heroicons/react/24/outline";
import { useEffect } from "react";
import axios from "axios";

const SingleServer = ({ title, content, likes, comments, hoster, dislikes, ip, port, max, serverId, ver }) => {
  const [likeCount, setLikeCount] = useState(likes || 0);
  const [dislikeCount, setDislikeCount] = useState(dislikes || 0);
  const [open, setOpen] = useState(false);
  const cancelButtonRef = useRef(null);
  const [hosterName, setHosterName] = useState("Unknown User");

  const handleLike = () => {
    // Make a POST request to the server liking API
    axios
      .post(`/api/server/like?id=${serverId}`)
      .then((response) => {
        if (response.status === 200) {
          // Check if the user has already liked the server
          const userHasLiked = response.data.message.includes("liked");

          // Update like count based on user's like status
          setLikeCount(likeCount + (userHasLiked ? -1 : 1));
        }
      })
      .catch((error) => {
        console.error("Error liking/unliking the server:", error);
      });
  };

  const handleDislike = () => {
    // Make a POST request to the server disliking API
    axios
      .post(`/api/server/dislike?id=${serverId}`)
      .then((response) => {
        if (response.status === 200) {
          // Check if the user has already disliked the server
          const userHasDisliked = response.data.message.includes("disliked");

          // Update dislike count based on user's dislike status
          setDislikeCount(dislikeCount + (userHasDisliked ? -1 : 1));
        }
      })
      .catch((error) => {
        console.error("Error disliking/undisliking the server:", error);
      });
  };

  const handleJoin = () => {
    setOpen(true);
  };

  useEffect(() => {
    // Fetch user data from /api/users
    axios
      .get("/api/users")
      .then((response) => {
        const users = response.data;
        const user = users.find((user) => user.email === hoster);
        if (user) {
          setHosterName(user.name);
        }
      })
      .catch((error) => {
        console.error("Error fetching user data:", error);
      });
  }, [hoster]);

  return (
    <div className="text-post bg-gray-800 text-white rounded-lg shadow-md p-4 my-4">
      <h3 className="text-xl font-semibold">{title}</h3>
      <p className="text-gray-300">{content}</p>
      <p className="text-gray-500">---------------</p>
      <p className="text-gray-400">Shared by &quot;{hosterName}&quot;</p>
      <p className="text-gray-400">Players Limit- &quot;{max}&quot;</p>
      <p className="text-gray-400">Server Version- &quot;{ver}&quot;</p>
      <div className="post-interactions mt-2 flex space-x-4">
        {/* Like Button */}
        <button
          onClick={handleLike}
          className="py-1 px-2 bg-green-600 text-white rounded-md shadow-md hover:bg-green-700"
        >
         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6">
  <path strokeLinecap="round" strokeLinejoin="round" d="M6.633 10.5c.806 0 1.533-.446 2.031-1.08a9.041 9.041 0 012.861-2.4c.723-.384 1.35-.956 1.653-1.715a4.498 4.498 0 00.322-1.672V3a.75.75 0 01.75-.75A2.25 2.25 0 0116.5 4.5c0 1.152-.26 2.243-.723 3.218-.266.558.107 1.282.725 1.282h3.126c1.026 0 1.945.694 2.054 1.715.045.422.068.85.068 1.285a11.95 11.95 0 01-2.649 7.521c-.388.482-.987.729-1.605.729H13.48c-.483 0-.964-.078-1.423-.23l-3.114-1.04a4.501 4.501 0 00-1.423-.23H5.904M14.25 9h2.25M5.904 18.75c.083.205.173.405.27.602.197.4-.078.898-.523.898h-.908c-.889 0-1.713-.518-1.972-1.368a12 12 0 01-.521-3.507c0-1.553.295-3.036.831-4.398C3.387 10.203 4.167 9.75 5 9.75h1.053c.472 0 .745.556.5.96a8.958 8.958 0 00-1.302 4.665c0 1.194.232 2.333.654 3.375z" />
</svg>
        </button>
        <span className="text-green-500"> {likeCount}</span>
        {/* Dislike Button */}
        <button
          onClick={handleDislike}
          className="py-1 px-2 bg-red-600 text-white rounded-md shadow-md hover:bg-red-700"
        >
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6">
  <path strokeLinecap="round" strokeLinejoin="round" d="M7.5 15h2.25m8.024-9.75c.011.05.028.1.052.148.591 1.2.924 2.55.924 3.977a8.96 8.96 0 01-.999 4.125m.023-8.25c-.076-.365.183-.75.575-.75h.908c.889 0 1.713.518 1.972 1.368.339 1.11.521 2.287.521 3.507 0 1.553-.295 3.036-.831 4.398C20.613 14.547 19.833 15 19 15h-1.053c-.472 0-.745-.556-.5-.96a8.95 8.95 0 00.303-.54m.023-8.25H16.48a4.5 4.5 0 01-1.423-.23l-3.114-1.04a4.5 4.5 0 00-1.423-.23H6.504c-.618 0-1.217.247-1.605.729A11.95 11.95 0 002.25 12c0 .434.023.863.068 1.285C2.427 14.306 3.346 15 4.372 15h3.126c.618 0 .991.724.725 1.282A7.471 7.471 0 007.5 19.5a2.25 2.25 0 002.25 2.25.75.75 0 00.75-.75v-.633c0-.573.11-1.14.322-1.672.304-.76.93-1.33 1.653-1.715a9.04 9.04 0 002.86-2.4c.498-.634 1.226-1.08 2.032-1.08h.384" />
</svg>
        </button>
        <span className="text-red-500">{dislikeCount}</span>
        {/* Join Button */}
        <button
          onClick={handleJoin}
          className="py-2 px-4 bg-blue-600 text-white rounded-md shadow-md hover:bg-blue-700"
        >
          Join
        </button>
      </div>
      {/* ... Dialog Code ... */}
         <Transition.Root show={open} as={Fragment}>
      <Dialog as="div" className="relative z-10" initialFocus={cancelButtonRef} onClose={setOpen}>
        <Transition.Child
          as={Fragment}
          enter="ease-out duration-300"
          enterFrom="opacity-0"
          enterTo="opacity-100"
          leave="ease-in duration-200"
          leaveFrom="opacity-100"
          leaveTo="opacity-0"
        >
          <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
        </Transition.Child>

        <div className="fixed inset-0 z-10 overflow-y-auto ">
          <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
            <Transition.Child
              as={Fragment}
              enter="ease-out duration-300"
              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
              enterTo="opacity-100 translate-y-0 sm:scale-100"
              leave="ease-in duration-200"
              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
            >
             <Dialog.Panel className="relative transform overflow-hidden rounded-lg  text-white shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg">

                <div className="bg-gray-900 px-4 pb-4 pt-5 sm:p-6 sm:pb-4">
                  <div className="sm:flex sm:items-start">
                    <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-indigo-100 sm:mx-0 sm:h-10 sm:w-10">
                      <LinkIcon  className="h-6 w-6 text-indigo-600" aria-hidden="true" />
                    </div>
                    <div className="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
                      <Dialog.Title as="h3" className="text-base font-semibold leading-6 text-gray-200">
                       Join Server "{title}" by Completing the Steps! 🌌🎮
                      </Dialog.Title>
                      <div className="mt-2">
       <ul class="text-sm text-gray-400 list-disc list-inside">
    <li>Open <strong>Minecraft</strong>🌍🪐</li>
    <li>Sign in with Microsoft🛡️🔗</li>
    <li>Click on <strong> 'Play' </strong>🚀🌠</li>
    <li>Navigate to the <strong>'Server' tab</strong> 🌐🔮</li>
    <li>Click on <strong>'Add Server'</strong>🧵🌌</li>
    <li>Enter the IP address: "<strong>{ip}</strong>" and Port: "<strong>{port}</strong>"⚡</li>
    <li>Press <strong>'Join Server'</strong>& enjoy the adventure!  🏞️🏰</li>
</ul>

                      </div>
                    </div>
                  </div>
                </div>
              
              <div className="bg-gray-800 px-4 py-3 sm:flex sm:flex-row-reverse sm:px-6">
                   <button
                    type="button"
                    className="inline-flex w-full justify-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 sm:ml-3 sm:w-auto"
                    onClick={() => setOpen(false)}
                  >
                    Done
                  </button>
                  <button
                    type="button"
                    className="mt-3 inline-flex w-full justify-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 sm:mt-0 sm:w-auto"
                    onClick={() => setOpen(false)}
                    ref={cancelButtonRef}
                  >
                   Cancel 
                  </button>
                </div>
              </Dialog.Panel>
            </Transition.Child>
          </div>
        </div>
      </Dialog>
    </Transition.Root>
    </div>
  );
};

export default SingleServer;

the code is working but while running

yarn build

i am getting this error


Solution

  • You could avoid escaping, and make your code look nicer by just using template literals instead.

    eg.

    Replace ->

    <p className="text-gray-400">Shared by &quot;{hosterName}&quot;</p>
    

    To ->

    <p className="text-gray-400">{`Shared by "${hosterName}"`}</p>