React component throws React.forwardRef error

[excelwebzone]

React component throws React.forwardRef error

[Siddharth-Dagar-25]

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;

1. 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.

2. 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.

3. In the update method exposed through useImperativeHandle, there's a check to ensure pickerRef.current is not null before calling update on it.