How to Render Data Dynamically in React

When it comes to multiple possibilities, most of the programmers are using switch Case to select the type of component. But this has some drawbacks. For example, if we added more components it won’t scale well by using a switch case.

When there is a need to present dynamic data components with different elements and input fields, it is difficult to show a client-side and difficult to manage. This leads to maintaining the separate component for the requirement. Therefore, we can use separate libraries to overcome this challenge.

So here, to render data dynamically we can use

React-json-dynamic-forms library.

With the use of this library, we can populate Input fields in a form by using the JSON input as per the requirement. Ultimately, we can overcome the drawbacks of the switch case as we don’t need to worry about the number of input fields and type of input fields and also validations.

Here we go with an example (Step by step) of a simple form using JSON library.

1. Create a react project.

npx create-react-app

#or

yarn create react-app yourprojectname

Install:

npm install — save react-json-dynamic-forms

2. Create our folders and file structure.

3. Now open the BasicInfo.js file and paste the below code.

import React from "react";
import "./../App.css";
import ReactJsonDynamicForms from "react-json-dynamic-forms";

const metaData = {
"muTextInput":{
"type":"MuTextInput",
"label":"First Name",
"placeholder":"Enter your last name",
"className":"fields"
},
"muTextInput2":{
"type":"MuTextInput",
"label":"Last Name",
"placeholder":"Enter your last name",
"className":"fields"
},
"muNumberInput": {
"type": 'MuNumberInput',
"label": 'Mobile Number',
"placeholder": '07********',
"className": 'fields',
"values": null,
"validation": 'required|max:10',
},
muSelectInput:{
"type":"MuSelectInput",
"label":"Gender",
"className":"fields",
"helperText":"",
"values":[{
   "label":"male",
   "value":"male"
},
{
   "label":"female",
   "value":"female"
}
],
"validation":"required"
},
"muDateInput": {
"type": 'MuDateInput',
"label": 'Date of Birth',
"helperText": 'Select your birthday',
"disabled": false,
"className": 'fields',
"readOnly": false,
"values": null,
"validation": 'required'
},
"muTextAreaInput": {
"type": "MuTextAreaInput",
"label": "Address",
"className": "fields",
"validation": "required"
},
};
class basicGeneral extends React.Component {
constructor(props) {
super(props);
this.state = {
elements: [
{ id: "muTextInput"},
{ id: "muTextInput2"},
{ id: "muNumberInput"},
{ id: "muSelectInput" },
{ id: "muDateInput" },
{ id: "muTextAreaInput" },
],
};
this.onChange = this.onChange.bind(this)
}
onChange(elements) {
console.log(elements)
this.setState({ elements: elements })
}
SubmitData=()=>{
console.log("Your Data ===>",this.state.elements)
}
render() {
return(
<>
<ReactJsonDynamicForms
elements={this.state.elements}
onChange={this.onChange}
metaData={metaData}
className='reactform'
/>
<button onClick={this.SubmitData} className="submit">Submit</button>
</>
)
}
} export default basicGeneral

4. Now open the Form.js file and paste the below code.

import React from "react";
import Info from '../components/basicInfo';
class Form extends React.Component {
render() {
return (
<div>
  <div className="row">
   <h1>Render Data dynamically in react</h1>
   <Info></Info>
  </div>
</div>
);
}
} export default Form

5. Now open the App.js file and paste the below code.

import React from 'react'
import Form from './pages/form';
function App() {
return (
 <div className="App">
   <Form></Form>
 </div>
);
}
export default App;

6. Now open the App.css file and paste the below code.

.App {
    text-align: center;
}
.submit{ 
    padding: 21px 214px;
    border-radius: 4px;
    background-color: #1246ab;
    color: white;
    margin: auto;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    outline: none;
    border: 1px solid #1246ab;
    margin-bottom: 60px !important;
}
.fields {
    width: 40%;
    margin: 40px !important;
}
.MuiInput-underline-27{
    border-bottom:1px solid #c2cbe1 !important;
}
.MuiInput-underline-27::after{
    border-bottom:2px solid #1ed2fa !important;
}
.MuiFormLabel-root-16{ 
    font-family: Poppins !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    color: #c2cbe1 !important;
    line-height: 0 !important;
}

7. Output

Ø Here you can change this JSON file and can load the input field to the form dynamically.