React Router is not able pass params into component created by this library

[pandiantcsl]

@elliottisonfire
JSON,
{
"component": "ActionForm",
"title": "Action Comment",
"columnUnit": 12,
"styles": "",
"children": [
{
"component": "Dropdown",
"label": "Reason",
"name": "Reason",
"dropdown_content": ["Unable to verify identity/Entity (L2)", "Unable to verify identity/Entity (L3)"],
"styles": ""
},
{
"component": "CheckboxField",
"styles": {
"margin": "10px"
},
"checkboxes": [
{
"label": "checkbox_item1_checked_default",
"key": 0
},
{
"label": "Possible Name Match",
"key": 1
},
{
"label": "Possible Business Name Match",
"key": 2
},
{
"label": "Physical Address Matches",
"key": 3
}
]
}
]
}

......
const componentMap = {
ActionForm,
Dropdown,
CheckboxField
}
const form = new ReactJsonSchema();
form.setComponentMap(componentMap);
const ActionFormComponent = () => form.parseSchema(actionFormSchema);

....

       <Route path="action/:actionId" component={ActionFormComponent} />

[eiof]

If you're looking to render the output of ReactJsonSchema, you can use Route's render function (also available in react-router v2 and v3) instead of passing in a component to mount. Either that, or wrap the output in a component and pass that component to Route.

You can see an example of using Route's render implementation here: https://github.com/TechniqueSoftware/react-json-schema/blob/react-router-example/demo/index.jsx#L57

[pandiantcsl]

I can see the props but not the this.props.params yet,

I console logged in ContactForm,
....
render() {
console.log('props', this.props);
.....

[eiof]

The props won't propagate because they aren't a part of the original schema. ReactJsonSchema will only consider props included in the schema on parseSchema.

You can achieve this by wrapping it in a component, and changing the schema on a lifecycle hook. I haven't tested this, but this should be close to what you're looking for

index.jsx

...
const ContactFormApp = () => (
 <Router>
    <div>
      <ul><Link to="/action/dismiss">Form</Link></ul>
      <ul><Link to="/about">About</Link></ul>

      <Route path="/action/:actionId" render={props => (
        <ContactFormWrapper parser={contactForm} schema={formSchema} {...props} />
      }) />
      <Route path="/about" render={props => (
        <p>React JSON Schema demo is a form.</p>
      )} />
    </div>
  </Router>
);

ContactFormWrapper.jsx

...

const parseSchemaWithParams = (params, schema, parser) => (
  parser.parseSchema({
    ...schema,
    actionId: params.actionId
  })
);

class ContactFormWrapper extends React.Component {

  constructor(props) {
    super(props);
    const { params, schema, parser } = props;
    this.state = {
      renderedSchema: this.parseSchemaWithParams(params, schema, parser)
    };
  }

  componentWillReceiveProps(nextProps) {
    const { params, schema, parser } = nextProps;
    this.setState = ({
      renderedSchema: this.parseSchemaWithParams(params, schema, parser)
    });
  }

  render() {
    return (
      <div>
        {this.state.renderedSchema}
      </div>
    );
  }
}
...

If you want to import ReactJsonSchema for ContactFormWrapper, you could even go back to using the component prop declaration for routes, and not have to pass the parser and the schema as props.

[eiof]

Closing as there is no issue.