Menu not working inside React Component

[atulmith]

Hi, I have a react project build using REKIT Studio. I tried to make a menu based app , but it gives a error that "TypeError: component.getClassName is not a function"

Is it that I cannot make a menu based navigation because REKIT Studio configures all the routing.

Kindly help me .

[atulmith]

My Imports

import MSONComponent from 'mson-react/lib/component';

My definiton is

`const definition={ name:"app.App", component: "App",

menu:{ component:"Menu", items:[ { path:"/", label:"Home", content:{ component: "MyList",

    }
  }
]

} }`

and my components render is as follows `render() { return ( <MSONComponent definition={definition}

);`

[atulmith]

Got the Menu working. Had to do away with the main index.js and introduce my CUSTOM index.js file with the MSON based render function . Now menu and Search bar is visible as needed.

[Kiho]

@atulmith I have similar problem. can you post your solution here? I mean code snippet.

[atulmith]

Hi Hope this helps. Of course the imported files are just js files with only JSON exported . Notice the bottom of this code (index.js file) you user the mson-react --- render() function.

`import { render } from "mson-react"; import compiler from "mson/lib/compiler"; import "typeface-roboto"; import MyForm from "./features/home/myformjson"; import MyAction from "./features/home/showalertaction"; import Innerform from "./features/home/innerform"; import TheInputComponent from "./features/home/mycustominput";

compiler.registerComponent("MyInput", TheInputComponent); compiler.registerComponent("MyAction", MyAction);

compiler.registerComponent(MyForm.name, MyForm); compiler.registerComponent(Innerform.name, Innerform);

compiler.registerComponent("app.Tasks", { component: "Form", fields: [ { component: "Text", name: "header", text: "(drag to reorder)" }, { component: "app.Innerforms",

},

{
  component: "CollectionField",
  name: "tasks",
  label: "Tasks",
  hideLabel: true,
  // forbidCreate: true,
  // forbidUpdate: true,
  // forbidDelete: true,
  // forbidViewArchived: true,
  // forbidSearch: true,
  // forbidSort: true,
  forbidOrder: false,
  formFactory: {
    component: "Factory",
    product: {
      component: "Form",
      fields: [
        {
          name: "task",
          component: "TextField",
          label: "Task",
          multiline: true,
          required: true
        },
        {
          name: "myemail",
          component: "TextField",
          label: "My Email",
          multiline: true,
          required: true
        },
        {
          name: "due",
          component: "DateField",
          label: "Due"
        }
      ]
    }
  },
  store: {
    component: "LocalStorageStore",
    storeName: "contacts"
  }
}

] });

const app = compiler.newComponent({ component: "App", menu: { component: "Menu", items: [ { path: "/", label: "To Dos", content: { component: "app.Tasks" } }, { path: "/myselect", label: "My Select Form", content: { component: MyForm.name } }, { path: "/customform", label: "My Custom Form", content: { component: "MyInput",

    }
  },
  {
    path: "/helloworld",
    label: "Hellow WOrld",
    content: {
      component: "Form",
      fields: [
        {
          name: "fullName",
          component: "PersonFullNameField",
          required: true
        },
        {
          name: "submit",
          component: "ButtonField",
          label: "Submit",
          type: "submit",
          icon: "Send"
        }
      ]
    }
  }
]

} });

render(app); `

[Kiho]

@atulmith Thanks, that's big help.