ReactJS | How to generate dynamic form from JSON with react?

In this tutorial, we are going to create the dynamic form. We will create different components for checkbox, input field and select box. We will render different type of fields base on the data.
Here we used some modern JavaScript technique to build this application.
Complete React Course
www.udemy.com/course/complete...
Support us with Bitcoin:
1NTuEsXoXE89YiJRNoBDBBRBECE7P9mBik
Open Crypto Wallet
jp-ex.io/register?code=S6Gcvun6
To get the latest Udemy coupon and news, subscribe our telegram channel
t.me/ckmobi
If you want to more familiar with the modern JavaScript and React, the following courses can help you
Complete Modern JavaScript BootCamp from the beginning
www.udemy.com/course/complete...
React - The Complete Guide with React Hook Redux 2020 in 4hr
www.udemy.com/course/complete...
0:00 Introduction
2:21 Add bootstrap cdn
5:09 Create Element component
9:08 Create Input, Select and Checkbox components
9:58 Render different components base on the JSON data
11:38 Pass data to the input field
14:00 Pass data to the select box
15:20 Pass data to the checkbox
16:25 Create Context for the form
17:00 Create handleSubmit and handleChange functions
18:23 Add handleChange to the input fields
21:59 Add handleChange to the select box
23:10 Add handleChange to the checkbox
23:46 Fine tune the handleChange and handleSubmit functions
source code :
github.com/cyrus8050/yt-dynam...
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
🔥Complete Courses🔥
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
Complete NodeJS course with express, socket io and MongoDB
www.udemy.com/course/create-n...
Complete Progress Web App BootCamp
www.udemy.com/course/complete...
Complete Modern JavaScript BootCamp from the beginning
www.udemy.com/course/complete...
React - The Complete Guide with React Hook Redux 2020 in 4hr
www.udemy.com/course/complete...
Vue JS and Firebase:Build an iOS and Android chat app [2020]
www.udemy.com/course/vuejs-an...
New SAT Math Course
www.udemy.com/course/new-sat-...
New SAT Math Practice Test Explain
www.udemy.com/course/new-sat-...
Get A* in GCSE Maths (Quadratic equations and graph)
www.udemy.com/course/get-a-in...
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
💟Follow me
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
‣‣ Udemy ► www.udemy.com/user/cyruschan2/
‣‣ Twitter ► / ckmobilejavasc1
‣‣ Facebook ► / javascript.ck
‣‣ Instagram ► / ckmobile8050
**Equipment that I use**
Macbook Pro
amzn.to/2CC41HV
Blue Yeti USB mic
amzn.to/3jf3gph
Camtasia
amzn.to/30aopbg
#javascript
#webdevelopement
#react dynamic form
#react json schema form

[@ckmobile]

Join the affiliates program and start earning money🚀 ckmobile.gumroad.com/affiliates

[@karlkrasnowsky3895]

this is good stuff. I've added complication to this for myself by trying to apply the concepts to a react typescript project. Interesting challenges.

[@gilberto.savoini]

excellent video. everything I needed to learn. Thank you so much!

[@FelipeDias29]

Thank you so much! This was exactly what I was looking for!

[@acesOfGreen]

Great tutorial and explanation. Tried it out and it works perfectly. Thanks for taking the time to share 👍

[@ckmobile]

Hope you guys enjoy this video! Keep learning and your dreams will come true :) Don't forget to SUBSCRIBE for more videos What will you create with ReactJS ? Please leave a comment below. You can also subscribe to get info or our (free) course coupons mailchi.mp/cb8cb6b3878e/javascript-course Read articles: ckmobile.medium.com/ Support what I do and push me to keep making free content www.patreon.com/join/ckmobile?

[@ruipaulocalei3048]

You should do more videos on react working with JSON comming from db + form, it's a plus to differ the content with other channels. My suggest for you.

[@ckmobile]

@@ruipaulocalei3048 Nice, thank you for your suggestion 😘😘Before i just afraid this tutorial will be too long so do not connect with db

[@thecombativemedic521]

Super helpful much apperciated ! Thank you

[@jerocamp]

wow! I finally understand it! thank you!

[@KuldeepSingh-hi1bg]

Nice explanation 🎉

[@bishalbhattarai9508]

I love your voice ..Thank you for the tuorial.

[@tabliqatchi6696]

Thank you for this video. BTW, you forgot to implement field_mandatory.

[@arjungarad3251]

This what I was looking from few days Thanks. I have one question can we bind each and every form field

[@aqkhana2002]

Everyone talking about dynamic control is there a way we can have dynamic html template ? Your forms does not look showing control from top to bottom what if i want to add some template in it ??? Reply

[@deepwebtube]

Great stuff ..keep it on sir!!

[@ckmobile]

Thank you 😘

[@ronitmishra8917]

Great content. I've a question though, lets say we have a select field in the form, and selecting any option would render a child form.. how would one go about doing that?

[@ckmobile]

use onchange function to detect, create a state. For example, if the state is true, then render that child form

[@ModdingMontagesHD]

Thats amazing man thanks.

[@ckmobile]

Thank you Staybreezy🥰

[@OMAtom360]

Hi ckmobile, this video is very useful. I have never ever seen this kind of videos with clear explanation. Can you please update this same video using Next.js ? Thanks in advance.

[@ckmobile]

I Will ❣️

[@noorkardache9334]

Thx for the tutorial!! but is it possible to change the values of the json doc directly? instead of doing a copy

[@ckmobile]

yes, u can using useEffect and fetch to fetch the JSON from the database, and then submit back the updated JSON to the database. I just simplify the tutorial so hardcode the JSON.

[@iRUnique]

so in order to create a user form builder, for example, you would store the formElement.json right? is it possible to convert a form into a json programatically?

[@ckmobile]

Yes. The whole form structure and data already stores as json

[@amkforu2673]

Thank you! This is great. But this solves only one part of the problem I am working on. I need to understand how can we use drag and drop to create custom form, for example let say I have a tool box with all the UI elements and just by drag and drop, I create the form and then on submit save the json in DB. This json is then fetched and will be rendered as form as explained in this video.

[@MrEmassive]

This is exactly what i want too

[@arpitachiddarwar5223]

React-form-builder-2 is exactly what you are looking for.

[@nathalialuisa2274]

I have a question because your code is exactly what i need but im a new one with react... If i wanna add some children ? Like an side bar with a main layout and your childrens are a button, input, other pages etc

[@vianqu]

Thank you sir

[@dumadoniagarasambora675]

This is nice video, thanks! Have you ever used json-schema to make it dynamic ? it is similar with this, but instead of using json file, UI info coming from API.

[@ckmobile]

Not yet. Thanks 👍 for the suggestion. Let me take a look on it.

[@wejdanaltaleb3126]

Hello Dear, mmm can u help? actually, I need what you're taking about it JSON schema

[@souvikdas3636]

how did you get the convert html to jsx thing on right click? what extension?

[@ckmobile]

Yes, The extension name is "html to jsx"🤣

[@regilearn2138]

Hi I have added the radio btn like checkbox ,but it didnot work can u please help,please add radio btn and date picker for this

[@rajeevbhosle1580]

thank you so much for this great video

[@ckmobile]

Thank you 😘

[@karlkrasnowsky3895]

by the way, not a good idea to index an object map by the loop index. You have the field_id, I suggest using that.

[@arpitachiddarwar5223]

How can I add email and password validations. For example email shall only start with alphabets and password shall contain at least 8 letters etc. ??

[@girofare]

take care ! in the git repository, the index.html contains a Virus => html:script-inf[Susp]

[@ragamisgod8281]

This video is very useful. I didn't seen this kind of video on youtube still now. Can you please continue with this video by adding a "discard changes" button?

[@ckmobile]

Thanks. But what is the function of discard change?

[@ragamisgod8281]

@@ckmobile Thanks for the reply. Sorry for my poor English. For example, the "name" field has a value from API. So once the user types an 'extra' text and clicks the discard changes button, the typed ( onChange ) value should be cleared. In other words, while loading time the text box has values like 'RAGAM IS GOD', so the user typing in a text box like 'RAGAM IS GOD extra', So once clicked the 'discard changes' button, the 'extra' text should be removed and 'RAGAM IS GOD' should be there. I will be grateful if post this video as soon as possible.

[@ckmobile]

@@ragamisgod8281 it's ok. I think i know what you mean. But what is the difference if the user just press ctrl and z together to undo? Are there any existing form can share that has this function?

[@ragamisgod8281]

@@ckmobile Thanks for the reply. I have no existing form for this. But, I can say that in this video there is submit button. So need to add an extra button, and name it as discarded changes. It should be clear on both the scenario 1) button click & 2) ctrl + z as well

[@vuejs1]

Great tutorial but the source code has miner inside it. Does your Udemy course has it too?

[@ckmobile]

Yes, this source code has miner , because at that time just try to find way to earn money by creating free content. For udemy course, no , there is no miner, just pure source code.

[@josephhyatt]

overall great video.. my only issue is how you would go so fast at some points, even in super slow motion you couldn't see what you were doing..

[@ckmobile]

Thanks Joseph 😀 which part u think is fast?

[@josephhyatt]

It's multiple parts really. I had to walk away from my pc for a few minutes but it's just a suggestion. Over good though

[@MubashirullahD]

Yeah, completely beginner nightmare

[@drakus7536]

How do I go about validating the form?

[@ckmobile]

You can check it in the submit function. If not valid then return

[@susanwang6102]

Is the code open source?

[@veltro5842]

Where did the formElement.json come from?

[@ckmobile]

i hardcode for this, but u can generate from database

[@rohitrockytgaming8966]

how we can use API ratherthen .json file

[@ckmobile]

You can fetch and store it as variable. As i just want to make the tutorial shorter, so hardcode the JSON😆

[@jerocamp]

@@ckmobile you can use axios and pass data to variables

[@darlingchavez8796]

error in input onchange is not a function

[@ckmobile]

Join the Ckmobile Affiliates Program and start earning money today 🚀🚀 @t

[@ruipaulocalei3048]

Great content, but I've tried for 1 month your logic using data coming from db in json format instead json file, no success. You can help me or give a logic to implement copying the data from db to a json file

[@ckmobile]

stackoverflow.com/questions/62346157/how-to-setstate-after-fetch-data-react-hook May be u can take a look how to set state after fetching data from db

[@ruipaulocalei3048]

@@ckmobile Thanks it worked

[@ruipaulocalei3048]

@@ckmobile ​ @ckmobile I have the react day picker in my project, but when click in day isn't filling the input_value because the value isn't update the input, how to handle with this?

[@ckmobile]

@@ruipaulocalei3048 could you share your code? because it is difficult to imagine without detail🙇‍♂🙇‍♂

[@toetoeag]

Can you share the source code?

[@ckmobile]

kzbin.info?event=video_description&redir_token=QUFFLUhqbWRFemNReDdYM2tmVXQ1VDBRZVR4YkJEMG1aUXxBQ3Jtc0tsWHJGdGEwUEl3aDBHMEw4X0dOdXBiX2RnTi1IbVY0NmZtMHZCb0dhYXhUaV9waGlSbHdTOExjQno4dzR5NDMwNGI1bHlKcWJkbnhwdl9NQVBhcVJaUmtsSTZya0VtU3NjN21WQ0stYkV4N2VxSmo4aw&q=https%3A%2F%2Fgithub.com%2Fcyrus8050%2Fyt-dynamic-form

[@toetoeag]

@@ckmobile It is working now. But how can I use it in class components? We can't use Hooks inside a class component. How can we mix hook and class components? Thanks

[@4dpeepscom]

Your video quaility was really bad

[@susiktachaudhuri4554]

Hi I am facing some issues. I have followed the exact steps shown in the Video....I need you help.. please let me know how to contact you.

[@victornguyen5678]

Thank you so much! This was exactly what I was looking for!

[@milanharry7931]

I know I am quite randomly asking but do anybody know of a good place to stream new tv shows online ?

[@pedrowill5506]

@Milan Harry I use Flixzone. You can find it on google :)

[@crewmateo1232]

@Pedro Will Definitely, I've been using flixzone for years myself :D

[@milanharry7931]

@Pedro Will thanks, signed up and it seems like they got a lot of movies there :) I appreciate it!

[@pedrowill5506]

@Milan Harry happy to help :)