Custom component with key and function import

Technical Questions
1

Builder public api key
b799497d742242299b5256ffee064d4b

What are you trying to accomplish
I want to register a custom component that uses a key and a function import.
Here is what it looks like when it’s working.

export default function Page({ page }) {
const [key, setKey] = useState(0); // Key to force remount

const remountComponent = () => {
setKey(prevKey => prevKey + 1);
};

  <div>
    <NFTTrade key={key} remountComponent={remountComponent} />
  </div>

and then a button on the page that runs calls remountComponent from within NFTTrade.

Screenshots or video link
Screenshots of your issue, or even better a link to a video of what is happening or what you are trying to accomplish. We love using loom for that sort of thing

Code stack you are integrating Builder with
NextJS

Reproducible code example
In the current config in builder imported like this it currently does nothing.
Builder.registerComponent(
dynamic(() => import(‘…/components/nft-trade’), { ssr: false }),
{
name: ‘Trade NFTs for OUT Transaction’,
}
)
I was planning to try this but I want to confirm all is good first.
Builder.registerComponent(
dynamic(() => import(‘…/components/nft-trade’), { ssr: false }),
{
name: ‘Trade NFTs for OUT Transaction’,
inputs: [
{ name: ‘key’, type: ‘number’, helperText: ‘key for the component’, advanced: ‘true’},
{ name: ‘remountComponent’, type: ‘Function’, helperText: ‘change key to start again’, advanced: ‘true’},
],
}
)

2

Hello @blaw,

I see you are trying to pass a function as input props, which is not allowed. To know about allowed input types, you can refer to the below link

As a solution, you can pass the function down to the Builder component using context

3

Thank you for the response. Would you have any other suggestions on how to get the component to reload on a button click within the component. I don’t think this solution would work as it would not update the key field of the component to get it to reload, please correct me if I am missing anything.

Or can I create another component that would import this one and just have the logic for keys and the function in that, and have that as the custom component that I import?

4

Hello @blaw,

You’re correct in your observation that simply refreshing the component without updating its key won’t necessarily trigger a reload. Changing the key is a common technique to force React to remount a component, thus triggering any necessary updates.

Regarding your second question, creating a separate component to handle the logic for keys and the reload function is indeed a valid approach. You can create a higher-order component (HOC) or a wrapper component that encapsulates the reloading logic and then use it to wrap your original component.

Here’s a basic example of how you could implement this:

jsx

// ReloadableComponent.js
import React, { useState } from 'react';

const ReloadableComponent = ({ children }) => {
  const [key, setKey] = useState(0);

  const reloadComponent = () => {
    setKey(prevKey => prevKey + 1);
  };

  return (
    <div>
      <button onClick={reloadComponent}>Reload</button>
      {React.cloneElement(children, { key })}
    </div>
  );
};

export default ReloadableComponent;