title: ReactJS & django-forms
body: <p>I have a modelform in django backend with validators, choicefields and etc. I would like to pass it to react and display it. First of all is that even possible? I would like to get it completly with validators, but just html is still great. The reason for that is:</p>
  
  <ol>
  <li>Avoiding double constant declarations on the front and back. For example select options: "male", "female", "???" would need to be on the backend for validation and frontend for display and validation. </li>
  <li>Constructing the whole html on the frontend for the form again, despite that all of it can also be easily created by django. Main concern again select options with many different custom values.</li>
  </ol>
  
  <p>There is a package called <a href="https://github.com/dealertrack/django-rest-framework-braces" rel="noreferrer">drf-braces</a> that has a FormSerializer but it does seem to have a problem, I constantly get a 500 error "is not JSON serializable error", like in:</p>
  
  <pre><code>name_or_event = CharFormSerializerField(error_messages={u'required':
  &lt;django.utils.functional.__proxy__ object&gt;}, help_text='', initial=None, 
  label='Name', required=True, validators=[]) is not JSON serializable
  </code></pre>
  
  <p>This is the drf-braces based serializer as seen in drf-braces form serialization example:</p>
  
  <pre><code>from drf_braces.serializers.form_serializer import FormSerializer
  
  from myapp.forms import SignupDataForm
  
  class MySerializer(FormSerializer):
      class Meta(object):
          form = SignupDataForm
  </code></pre>
  
  <p>and the API view based on <a href="https://github.com/Tivix/django-rest-auth" rel="noreferrer">rest-auth</a> RegisterView:</p>
  
  <pre><code>from myapp.serializers import MySerializer
  
  class TestView(RegisterView):
  
      permission_classes = (AllowAny,)
      allowed_methods = ('GET', )
      serializer_class = MySerializer
  
      def get(self, *args, **kwargs):
          serializer = self.serializer_class()
          return Response({'serializer': serializer}, status=status.HTTP_200_OK)
  </code></pre>
  
  <p>If I open the url assigned to TestView in browser I can see the form fields. But when loading with ajax from react I get a 500 with "is not JSON serializable error" above. The call is made from React.component constructor like bellow. I don't say it would display the field correctly, so far mostly I tried to print the response in to console and see what error that throws, but it dosn't get that far:</p>
  
  <pre><code>loadUserDetail() {
      this.serverRequest = $.get("myUrl", function (result) {
        console.log(result);
        this.setState({
          username: result.name_or_event,
          email: result.email
        });
      }.bind(this));
  }
  </code></pre>
  
  <p>Any other ideas how to do this? I am completely wrong with my approach, right? :-)</p>