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

Показать описание

Welcome to Our Youtube Channel Seema Holiday Developer.
About this video-
Hey Friends,
In this video we are going to learn how create or generate form using json or api json dynamic data in react. I hope this video will be like by you.

Topic Covered:
json form tutorial
json form
react json form
json to html form
json schema form
react json schema form
react json, react json tutorial
react json file
create form using json data in reactjs
create form using react js
create form in react js
create form using json data in react js
dynamic form react, dynamic form reactjs
dynamic form react native, dynamic form react hooks
dynamic form builder react
react hook form dynamic fields
how to create form using react js
how to generate dynamic form from json with react

#react #jsonformreact #reactwithjson #hooks #hooksform

Рекомендации по теме

Комментарии

Thank You, Very grateful for this. This is what i wanted.

binodwaibatamang

Thanks Seema. This is really helpful.

I have requirement to make a dynamic form, with cascading questions like you see question 2, if you answer question 1 with a select value or, you see question 3, ..and like that...in my effort to build a survey Form.

But I got good tips from you.

Uttam

uttamdutta

Hi Seema, Thank you for the video. Can you help in how to manage the state of these forms using redux. as it is dynamic not hardcorded. can you make a video on that? Wuuld be very grateful to you.

crashcoding

Hi Mam, Thank you so much for this video. Can you share the link for this code ?

arpitachiddarwar

Thank you this video, If possible please share the Json da with us .

adityachatterjee

Soft work, can one generate a share link for the form for people to fill ?

fadodundamilare

Maam..form data ko js file ma store karwa sakte h kya..agar ha to plzz ek video us par v banow

ranjanpaswan

Ma'am can use even input of radio and checkboxes also

Prince-qovm

Is it better to use libraries like formik ?

omlachake

FormBuilder pe bnao please with config file

sudhamanasvivlogs

Hi Seema Ji, Do you know "How to handle different JSON form Structures in one application itself". Using common handle change for both structures should handle dynamically, we should not define any static code to handle the changes.

IF YOU CAN HELP I'll be very grateful to you.
I really appreciate any help you can provide.

Example
1st JSON Structure

[{
label: "Title",
keyName: "title",
type: "select",
value: "",
placeholder: "Select Title",
defaultValue: "Mr",
options: [],
rules: {
required: true,
}
},
{
label: "First Name",
keyName: "firstname",
type: "text",
value: "",
placeholder: "Enter your first name",
defaultValue: "Akhil",
rules: {
required: true,
},
validations: [{
minLength : 3,
maxLength : 10,
regex: /^[A-Za-z]+$/
}]
}]

2nd JSON Structure

{
data:{
members:[
{
label: "Title",
keyName: "title",
type: "select",
value: "",
placeholder: "Select Title",
defaultValue: "Mr",
options: [],
rules: {
required: true,
}
},
{
label: "First Name",
keyName: "firstname",
type: "text",
value: "",
placeholder: "Enter your first name",
defaultValue: "Akhil",
rules: {
required: true,
},
validations: [{
minLength : 3,
maxLength : 10,
regex: /^[A-Za-z]+$/
}]
}
]
}
}

beldariakhil