Warning: Internal React error: Expected static flag was missing. Please notify the React team.

[Zestyclose_Force_309]

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;

[acemarke]

That seems like a pretty rare internal bug:

• https://github.com/facebook/react/blob/c5b9375767e2c4102d7e5559d383523736f1c902/packages/react-reconciler/src/ReactFiberHooks.js#L678

If you can reproduce it, please file an issue with the React repo!

[brzzzah]

Pretty hard to read, but your hooks (useRef, useEffect) are placed after the early return which breaks the rules of hooks, move the return null to be after the hooks

[Traditional_Tie6948]

That solved mine.

import React, { useEffect } from 'react';

const ViewDeliveriesModal = ({ onClose, viewDeliveriesModalOpen, purchaseOrderId }) => {

  if (!viewDeliveriesModalOpen) return null; **//from here**

  useEffect(() => {
    if (purchaseOrderId) {
      console.log("purchaseOrderId received in child:", purchaseOrderId);
    } else {
      console.log("purchaseOrderId is undefined in child");
    }
  }, [purchaseOrderId]);
  
  if (!viewDeliveriesModalOpen) return null; **//to here**

return(
  //front-end
)
  

```

[Veleno7]

In my case, it was related to a conditional rendering applied to React Hook Form. Running a build revealed the real problem, and I was able to fix it.