Custom component in Next js not receiving props which are passed to it as inputs

Technical Questions
1

“react”: “^18.1.0”,
node : v20.9.0
“@builder.io/react”: “^1.1.47”,

What are you trying to accomplish
=> The custom component in the builder editor shows the fields that has been added via react code as inputs to the registered components

But not able to receive those inputs as the props to the same component inside the code
Code is attached

Code stack you are integrating Builder with
e.g. NextJS, react, Shopify

Reproducible code example
import { Builder } from ‘@builder.io/react’

const Heading = (props) => {

console.log(‘builder props : -’, props ) //Not getting props in the console
return

# {props.text}


}

Builder.registerComponent(Heading, {
name: ‘Heading’,
inputs: [
{ name: ‘title’, type: ‘string’, defaultValue: ‘I am a heading component!’ },
{ name: ‘email’, type: ‘boolean’, defaultValue: true }
]
})

2

Hello @SourabhNeje,

Greetings and welcome to the Builder.io forum.

To better assist you, could you provide additional context regarding the issue you’re encountering? Are there any specific errors appearing in the console? Additionally, sharing the console output for console.log(‘builder props: -’, props) would be immensely helpful in diagnosing the problem.

For your reference, here’s a simple example that has proven effective in our testing.

const Heading = props => (
  <h1 className="my-heading">{props.title}</h1>
)

Builder.registerComponent(Heading, { 
  name: 'Heading',
  inputs: [{ name: 'title', type: 'text' }],
  image: 'https://tabler-icons.io/static/tabler-icons/icons-png/3d-cube-sphere-off.png'
});
3

Hi
console.log(‘builder props: -’, props) //Getting undefined in the console

Is it because of the “@builder.io/react” version = “^1.1.47” ?

What could be the reason of getting props as undefined?

Lets take your example
const Heading = props => (

{props.title}

)

Builder.registerComponent(Heading, {
name: ‘Heading’,
inputs: [{ name: ‘title’, type: ‘text’ }],
image: ‘https://tabler-icons.io/static/tabler-icons/icons-png/3d-cube-sphere-off.png’
})

In the above example
I will get props as undefined , even when I am passing the inputs to the Component in Builder.registerComponent( ) method

4

Hello @SourabhNeje,

While we’re currently unable to reproduce the reported issue on our end, we recommend attempting an upgrade to “@builder.io/react”: “^3.1.1”. This updated version may address the issue you’re facing. Give it a try, and let us know if it resolves the problem.