CODEWITHSUNDEEP
formsreactjs
Black.Jack
Black.Jack

Reputation: 1959

Invisible react-jsonschema-form

I'm playing around the interesting approach to make forms just modeling json.

So I've read about react-jsonschema-form.

So, I've create a custom component which renders a form like this:

import React, { Component } from "react";   
import Form from "react-jsonschema-form";

const schema = {
  title: "Todo",
  type: "object",
  required: ["title"],
  properties: {
    title: {type: "string", title: "Title", default: "A new task"},
    done: {type: "boolean", title: "Done?", default: false}
  }
};

const log = (type) => console.log.bind(console, type);

export default class myFrom extends Component { 
    render(){
          return ( 
           <Form schema={schema}
            onChange={log("changed")}
            onSubmit={log("submitted")}
            onError={log("errors")} /> 
        ); 
    } 
}

Then I've referenced it in my create-react-app dummy project's App.js:

import myFrom from './custom-forms-test'
class App extends Component {

  render() {
    return ( 
      <div className="App"> 
            <div className="App-header">
              <img src={logo} className="App-logo" alt="logo" />
              <h2>Welcome to React</h2>
            </div> 
                <myFrom/>
       </div> 
    );
  }
}

export default App;

But nothing renders. Now I'm stuck, maybe the form can't be a nested component? Is it possible? Any hints?

Thanks!

Upvotes: 1

Views: 698

Answers (1)

NiKo
NiKo

Reputation: 11414

React component names must start with a capital letter. Try renaming myForm to MyForm.

Upvotes: 3

Related Questions