You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
chunk-YTQVGCO2.js?v=4616d38d:521 Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?
Look like you need to upgrade the component. Here is a new version:
// @ts-nocheckimportReact,{useEffect,useImperativeHandle,useRef}from'react'import{Picker}from'emoji-mart'constEmojiPicker=React.forwardRef((props,ref)=>{constpickerRef=useRef(null)if(pickerRef.current){pickerRef.current.update(props)}useEffect(()=>{pickerRef.current=newPicker({ ...props})return()=>{pickerRef.current=null}},[])// Expose methods or properties via the refuseImperativeHandle(ref,()=>({update: (newProps)=>pickerRef.current?.update(newProps),// Add more methods or properties as needed}),[props])return<divref={ref}/>})exportdefaultEmojiPicker
import React, { useEffect, useImperativeHandle, useRef } from 'react';
import { Picker } from 'emoji-mart';
const EmojiPicker = React.forwardRef((props, ref) => {
const pickerRef = useRef(null);
useEffect(() => {
// Initialize the Picker instance
pickerRef.current = new Picker({ ...props });
// Cleanup
return () => {
pickerRef.current = null;
};
}, []); // Empty dependency array to run only on mount and unmount
useImperativeHandle(ref, () => ({
update: (newProps) => {
// Check if the pickerRef.current is available and then update
if (pickerRef.current) {
pickerRef.current.update(newProps);
}
},
// Add more methods or properties as needed
}));
return <div ref={pickerRef} />; // Use pickerRef for the div
});
export default EmojiPicker;
The ref you passed to EmojiPicker is being used to expose methods to the parent component. The pickerRef is used for the div to maintain the reference to the actual DOM element.
I've left the dependency array empty to ensure that the useEffect hook runs only once when the component mounts and when it unmounts. If you want the effect to run when certain props change, you should include those props in the dependency array.
In the update method exposed through useImperativeHandle, there's a check to ensure pickerRef.current is not null before calling update on it.
When using
@emoji-mart/reac
I'm getting an error:chunk-YTQVGCO2.js?v=4616d38d:521 Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?
Look like you need to upgrade the component. Here is a new version:
Usage:
The text was updated successfully, but these errors were encountered: