Does anybody knows what could be wrong with this component?
import { useEffect, useRef } from 'react'
import React from 'react';
const ModalShop = ({ isVisible, onClose }) => {
if (!isVisible) return null;
const handleClose = (e) => {
if (e.target.id === 'wrapper') { onClose(); }
}
const inputRef = useRef(null);
const spanRef = useRef(null);
useEffect(() => {
const input = inputRef.current;
const span = spanRef.current;
const handleInput = () => {
if (input.value.trim() !== '') {
span.classList.add('text-green-800', 'bg-slate-300', 'transform', '-translate-y-4', '-translate-x-0', 'text-sm', 'mx-4', 'px-1');
} else {
span.classList.remove('text-green-800', 'bg-slate-300', 'transform', '-translate-y-4', '-translate-x-0', 'text-sm', 'mx-4', 'px-1');
}
};
input.addEventListener('input', handleInput);
return () => {
input.removeEventListener('input', handleInput);
};
}, []);
return (
<div className='fixed inset-0 right-30 bg-black
bg-opacity-25 backdrop-blur-sm flex
justify-center items-center z-30'
onClick={handleClose}
id='wrapper'
>
<div className='w-[300px] px-5 sm:w-[600px] sm:px-0 flex flex-col z-40'>
<button className='text-white text-xl
place-self-end'
onClick={() => onClose()}
>
x
</button>
<div className='bg-slate-300 p-2 rounded h-[300px] w-[auto] flex items-center'>
<label className='relative'>
<input type='text' className='h-[40px] w-[250px]
text-lg bg-slate-300 border-2 rounded-r-3xl
border-gray-600 outline-none
focus:border-green-800 focus:text-black
transition duration-200 px-2'
id="nombreCompleto" ref={inputRef}
/>
<span className='text-lg text-gray-600 input-text
absolute left-0 top-2 mx-2 px-2' id="nombreCompletoLabel"
ref={spanRef}
>
Put Your Name Here
</span>
</label>
</div>
</div>
</div>
)
}
export default ModalShop;
When the component is executed this warning is thrown
Warning: Internal React error: Expected static flag was missing. Please notify the React team. ModalShop@webpack-internal:///(app-pages-browser)/./src/app/components/ModalShop.jsx:10:34 section Price@webpack-internal:///(app-pages-browser)/./src/app/sections/Price.jsx:31:86 Suspense div InnerLayoutRouter@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:241:18 RedirectErrorBoundary@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:72:9 RedirectBoundary@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:80:24 NotFoundErrorBoundary@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:54:9 NotFoundBoundary@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:62:62 LoadingBoundary@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:315:76 ErrorBoundary@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:130:67 InnerScrollAndFocusHandler@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:151:9 ScrollAndFocusHandler@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:226:37 RenderFromTemplateContext@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/render-from-template-context.js:15:44 OuterLayoutRouter@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:325:209 body html RedirectErrorBoundary@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:72:9 RedirectBoundary@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:80:24 NotFoundErrorBoundary@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:54:9 NotFoundBoundary@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:62:62 DevRootNotFoundBoundary@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/dev-root-not-found-boundary.js:32:24 ReactDevOverlay@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/react-dev-overlay/internal/ReactDevOverlay.js:66:9 HotReload@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/react-dev-overlay/hot-reloader-client.js:295:37 Router@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js:159:100 ErrorBoundaryHandler@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:100:9 ErrorBoundary@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:130:67 AppRouter@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js:436:47 ServerRoot@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:128:24 RSCComponent Root@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:144:24
if (!isVisible) return null;occuring before theuseEffect/useRefhook calls (a bit tired at the moment to verify the specific hook that causes it). See this github issue thread, in particular the comment I hardlinked in there. – Glissando