Can't use `useRef()` in component

[chilly zinc]

Hi @west gazelle. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

Sorry @west gazelle, I seem to be having a bit of trouble. Don't worry though, I've pinged my supprt and they will try to fix me up! :technologist:

Perhaps try again in 15mins?

[west gazelle]

component

Can't use useRef() in component

I also tried this: #discussions message

But still nothing

@chilly zinc Can't use useRef() in a non react component, what do I do?

[chilly zinc]

Let me check the knowledge base for you. One moment! :books:

---

useRef() is a React Hook, and it can only be used within React components. If you need to use a similar functionality in a non-React component, you might need to find an alternative approach or consider converting the non-React component into a React component.

If you decide to convert the non-React component into a React component, you can then use useRef() as shown in the following example from the Next.js documentation (https://beta.nextjs.org/docs/api-reference/components/script):

import { useRef } from 'react'
import Script from 'next/script'

export default function Page() {
  const mapRef = useRef()

  return (
    <>
      <div ref={mapRef}></div>
      <Script
        id="google-maps"
        src="https://maps.googleapis.com/maps/api/js"
        onReady={() => {
          new google.maps.Map(mapRef.current, {
            center: { lat: -34.397, lng: 150.644 },
            zoom: 8,
          })
        }}
      />
    </>
  )
}

In this example, useRef() is used to create a reference to a DOM element (mapRef) within a React component.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@west gazelle kapa.ai is still learning and improving, please let us how it did by reacting below

[west gazelle]

@chilly zinc how do I convert the non-React component into a react component

[chilly zinc]

Let me check the knowledge base for you. One moment! :books:

---

To convert a non-React component into a React component, you'll need to follow these steps:

1. Import React and any necessary hooks or components.
2. Create a functional or class component.
3. Move the logic from the non-React component into the React component.
4. Use React hooks or lifecycle methods as needed.
5. Return the JSX for rendering the component.

Here's a general example of converting a non-React component into a functional React component:

// Import React and any necessary hooks or components
import React, { useState, useEffect } from 'react';

// Create a functional component
const MyComponent = (props) => {
  // Use React hooks or state as needed
  const [state, setState] = useState(initialState);

  // Move the logic from the non-React component into the React component
  useEffect(() => {
    // Your logic here
  }, []);

  // Return the JSX for rendering the component
  return (
    <div>
      {/* Your JSX here */}
    </div>
  );
};

export default MyComponent;

Keep in mind that the example above is a general template. You'll need to adapt it to your specific use case by incorporating the logic and structure of your non-React component.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@west gazelle kapa.ai is still learning and improving, please let us how it did by reacting below

[west gazelle]

Problème is here

[low sentinel]

what do you mean to convert a non-react component to react?

what nextjs version are you using, do you use it in experimental mode?

[west gazelle]

Idk I was just asking

What I'm trying to achieve is the following

I have a db where all my tools are stored, along with a slug

On pages/tool/[slug] I get a slug from the params, and fetch the tool using that slug

I also export a generatedMetadata with the name of the tool as the title of the page

Then with the slug for example "color-picker" I transform it to, ColorPicker and import the right component like such: const Component = dynamic(() => import(`@components/tools/${componentName}`));

So that for each tool, it goes under components/tools and gets the right one and renders it

Now each component is different, some may need react hooks, some don't

So I can't pass anything from the page.jsx, cause it would just be a mess

================================================

I could create a page for each tool for example /pages/tool/color-picker but that wouldn't be efficient, I want to have something that gets the tool and sends it as metadata without having to do manually each time

Sort of a layout