[Vuejs]-How to use array object when import web component to react app

by

0👍

React doesn’t support passing props directly to web components. That is one of the short coming React. It only supports passing attributes (strings/numbers) to web component. You will have to use React ref to do that imperatively. Following is the example Test component using hooks.

function Test() {
  const [rooms, setRooms] = useState([
    {
      roomId: 1,
      roomName: "Room 1",
        
    }
  ]);

  const messages = [];

  // hook to maintain chat component instance
  const chatElm = useRef(null);

  useEffect(() => {
    if (chatElm.current) {
      // Update the rooms property of the chat web component imperatively
      chatElm.current.rooms = rooms;
    }
  }, [rooms]);

  return (
    <div>
      <vue-advanced-chat ref={chatElm} currentUserId="12"></vue-advanced-chat>
    </div>
  );
}

Read React web component documentation for further information.

Leave a comment