1

//here is form in django code

<form method="post" novalidate>
  {% csrf_token %}
  {{ form }}
  <button type="submit">Submit</button>
</form>

//now the form is rendered as

<input type="text" name="phone_email" required id="id_phone_email">
 <input type="text" name="full_name" required id="id_full_name">

//now this html code doesn't have any input field closing tag(/>) any i am being able to run the jsx code because of the absence of closing input tag.any idea how can i put closing tag(/>) in django??

Shures Nepali
  • 453
  • 1
  • 5
  • 12
  • `input` does not have closing tag. Your issue is something else https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input – 4140tm Dec 19 '18 at 14:15
  • I know that it's optional, but react jsx doesn't work without that...Now i am in trouble.so please any idea? – Shures Nepali Dec 19 '18 at 14:25
  • The markup rendered by django is correct. You need to use `/>` with the javascript for react. – markwalker_ Dec 19 '18 at 14:32
  • 1
    I'm confused. How is the rendered form interfering with jsx? They should not have direct interaction. – 4140tm Dec 19 '18 at 14:33

1 Answers1

3

To override how a form renders the HTML for its input fields, you could create a custom form widget. 

from django.forms.widgets import Input

class JSXInput(Input):
    template_name = 'myapp/widgets/jsxinput.html'

And add this widget to your form field:

class MyForm(Form):
    full_name = forms.CharField(widget=JSXInput)

Then you can crib off of the django/forms/widgets/input.html template in the django.forms.templates module and add your closing brace.

<input type="{{ widget.type }}" .... />

This was for Django 2, but iirc it is pretty similar in 1.11.

However, you should ask yourself whether or not your JSX code should be rendered by Django, or instead be a static asset that then talks to a Django REST API.

bruno desthuilliers
  • 75,974
  • 6
  • 88
  • 118
Nikolaj Baer
  • 359
  • 1
  • 8
  • It's really working ..thanks a lot mr #bruno_desthuilliers....can i ask another issue please...i need to customise the csrf input filed also so any idea about that ? – Shures Nepali Dec 20 '18 at 20:45
  • You should be able to generate that one by hand by using the `csrf_token` in the context. Take a look at [https://stackoverflow.com/a/3764652/616950] – Nikolaj Baer Dec 21 '18 at 15:28