./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 "{hosterName}"</p>
<p className="text-gray-400">Players Limit- "{max}"</p>
<p className="text-gray-400">Server Version- "{ver}"</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
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 "{hosterName}"</p>
To ->
<p className="text-gray-400">{`Shared by "${hosterName}"`}</p>