# Register aReact component with props that can be edited in the builder dashboard

**URL:** <https://forum.builder.io/t/register-areact-component-with-props-that-can-be-edited-in-the-builder-dashboard/525>\
**Category:** CMS\
**Tags:** react\
**Created:** [March 18, 2021, 10:52pm UTC](https://forum.builder.io/t/register-areact-component-with-props-that-can-be-edited-in-the-builder-dashboard/525 "2021-03-18T22:52:15Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![rdonahue](https://avatars.discourse-cdn.com/v4/letter/r/76d3ee/32.png) [@rdonahue](https://forum.builder.io/u/rdonahue)\
**Post date:** [March 18, 2021, 10:52pm UTC](https://forum.builder.io/t/register-areact-component-with-props-that-can-be-edited-in-the-builder-dashboard/525/1 "2021-03-18T22:52:15Z")

</div>

Hello! I’m trying to establish a proof-of-concept using React that will allow me to register a React component in Builder with props that be designed in builder but are restricted to specific use cases (we want to restrict editing the content in the dashboard).

I have created a React app, installed builder dependencies, and have initialized builder in the index.js. I have a page registered in builder and it is displaying my page in the dashboard, but the content isn’t editable. I’m not entirely sure how to establish default values for something in a page, or a component being used in a page, and how to connect that to content that can be edited in the dashboard.

Any help is appreciated, thank you!

---

<div class="post-metadata">

**Author:** ![kara](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/kara/32/80_2.png) [@kara](https://forum.builder.io/u/kara)\
**Post date:** [March 19, 2021, 10:39pm UTC](https://forum.builder.io/t/register-areact-component-with-props-that-can-be-edited-in-the-builder-dashboard/525/2 "2021-03-19T22:39:30Z")

</div>

Hey, thanks for reaching out! If you can create a small example repo or code sandbox, that would help us take a look at your integration. Thanks!

---

<div class="post-metadata">

**Author:** ![rdonahue](https://avatars.discourse-cdn.com/v4/letter/r/76d3ee/32.png) [@rdonahue](https://forum.builder.io/u/rdonahue)\
**Post date:** [March 22, 2021, 5:59pm UTC](https://forum.builder.io/t/register-areact-component-with-props-that-can-be-edited-in-the-builder-dashboard/525/3 "2021-03-22T17:59:10Z")

</div>

Here is a sandbox of my repo: [react - CodeSandbox](https://codesandbox.io/s/github/PeepTheMoon/builder-react-sandbox)

I have registered the components in the builder dashboard and am able to get them loaded there. I have the builder chrome extension and I can see that my content is registered in builder with the blue outline, however I don’t get an edit button that takes me to the builder dashboard.

Where I’m at now is I want to first verify that I can edit and manage the coded content directly in the builder dashboard, but I’m not seeing the blue edit button in the deployed site on localhost. I am 1. not sure that I am connecting the code and the dashboard correctly and 2. not sure how to establish default values in the code, have that rendered on the deployed site, and then edit that content directly in the dashboard.

One of the disconnects for me is that when I’m looking at the example repos in the builder github, I can deploy the site and see the beautiful working examples, but I’m unable to see how the components are registered in the dashboard and make the connections between the code and how to manage that in the dashboard. Is there a way to allow new builder users access to the deployed example site’s builder dashboard to gain a more complete understanding? When I click the edit button, I am taken the dashboard where a popup displays a “Content entry not found” message. I have attached a screenshot for reference.

 ![Screen Shot 2021-03-22 at 10.56.21](https://us1.discourse-cdn.com/flex020/uploads/builder/original/1X/e37c6aeb443217927c99484336155793f24283ff.jpeg)

Thank you so much for your help! I’m really looking forward to learning more about builder and implementing it for my employer’s website.

---

<div class="post-metadata">

**Author:** ![aziz](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/aziz/32/2551_2.png) [@aziz](https://forum.builder.io/u/aziz)\
**Post date:** [March 23, 2021, 5:36pm UTC](https://forum.builder.io/t/register-areact-component-with-props-that-can-be-edited-in-the-builder-dashboard/525/4 "2021-03-23T17:36:26Z")

</div>

Hi @rdonahue,  
There’s a couple of issues in the sandbox you sent:

- No need to register header with a builderComponent as a custom component, you can use a [`Symbol`](https://www.builder.io/c/docs/symbols) directly in content for that, or you can just use the `BuilderComponent` in code, I adjusted the codesandbox here [long-morning-kfc8f - CodeSandbox](https://codesandbox.io/s/long-morning-kfc8f?file=/src/App.js) , hopefully it’ll make it a bit clearer how builder works.
- Example starters are designed to work with it’s framework ( nextjs , gatsby), and have instructions on each on how to get started.
- Edit button not showing is an intermittent bug in the chrome extension that we have a fix for coming soon.
- Can’t give you access to the demo site content, but you can spin your own clone, using the builder cli from the starter folder where we have all the models/content committed and ready for you to use.

Finally, if you are looking for guidance on integration approach, please reach out to the support and share your use case and we’ll happily guide you through it.

---

<div class="post-metadata">

**Author:** ![rdonahue](https://avatars.discourse-cdn.com/v4/letter/r/76d3ee/32.png) [@rdonahue](https://forum.builder.io/u/rdonahue)\
**Post date:** [March 30, 2021, 11:47pm UTC](https://forum.builder.io/t/register-areact-component-with-props-that-can-be-edited-in-the-builder-dashboard/525/5 "2021-03-30T23:47:28Z")

</div>

Hi Aziz,

Thanks for your help! I have tried to clone the react-design-system example and followed the steps outlined in the readme, which is to sign in to builder, create a new page, then clone and start the project. I have created a new test space and created a new private key. I navigate to the stated folder and enter `builder create -k [private-key] -n [space-name] -d` where I get an error: `builder command not found`. Can you help with this error?

---

<div class="post-metadata">

**Author:** ![rdonahue](https://avatars.discourse-cdn.com/v4/letter/r/76d3ee/32.png) [@rdonahue](https://forum.builder.io/u/rdonahue)\
**Post date:** [April 5, 2021, 8:49pm UTC](https://forum.builder.io/t/register-areact-component-with-props-that-can-be-edited-in-the-builder-dashboard/525/6 "2021-04-05T20:49:10Z")

</div>

Just checking on the status of this question…

---

<div class="post-metadata">

**Author:** ![aziz](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/aziz/32/2551_2.png) [@aziz](https://forum.builder.io/u/aziz)\
**Post date:** [April 6, 2021, 5:04am UTC](https://forum.builder.io/t/register-areact-component-with-props-that-can-be-edited-in-the-builder-dashboard/525/7 "2021-04-06T05:04:30Z")

</div>

> [@rdonahue](#):
>
> builder command not found

Have you installed it with npm globally?

```auto
npm install -g @builder.io/cli

```

If so, then it’s an issue of missing global node modules, is this the case for all your globally installed modules or just builder?

Either way I think you could find a fix by following the accepted answer here [node.js - Global Node modules not installing correctly. Command not found - Stack Overflow](https://stackoverflow.com/a/15623632/3109205) to fix the issue, if it continues, you can always just install it locally and add it as a script to your package.json. Hope this helps.

---

<div class="post-metadata">

**Author:** ![rdonahue](https://avatars.discourse-cdn.com/v4/letter/r/76d3ee/32.png) [@rdonahue](https://forum.builder.io/u/rdonahue)\
**Post date:** [April 6, 2021, 6:15am UTC](https://forum.builder.io/t/register-areact-component-with-props-that-can-be-edited-in-the-builder-dashboard/525/8 "2021-04-06T06:15:27Z")

</div>

Thank you, that was a success. I have encountered the following error after successful installation of the cli:

 ![Screen Shot 2021-04-05 at 23.27.02](https://us1.discourse-cdn.com/flex020/uploads/builder/original/1X/041c6ec26e8014328ad3a9f63e1dc45df74b65d1.png)  
I have navigated to `.nvm/versions/node/v15.3.0/lib/node_modules/@builder.io/cli/node_modules/graphql-typed-client/dist/client/createClient.js` and examined the file. Can you help me understand which organization would be considered the root? We have a handful of test spaces, but I believe this is referring to the organization itself. However I cannot find a way to generate a private key unless I am within one of our spaces. I have generated this key within the reactDesignSystem space that I have set up, which is one of 5 spaces.

Thank you!

---

<div class="post-metadata">

**Author:** ![aziz](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/aziz/32/2551_2.png) [@aziz](https://forum.builder.io/u/aziz)\
**Post date:** [April 6, 2021, 5:12pm UTC](https://forum.builder.io/t/register-areact-component-with-props-that-can-be-edited-in-the-builder-dashboard/525/9 "2021-04-06T17:12:59Z")

</div>

Please check the answer to a similar issue here [Error on using builder create command - #2 by aziz](https://forum.builder.io/t/error-on-using-builder-create-command/558/2)
