convert json data to react components with ajax requests - json

Question

I have a problem in convertion json data to react components with ajax requests.
My json file is under "src/data/form-inputs.json".
The content of form-inputs.json is
{
"form_inputs": [
{
"label": "Sender Email",
"name": "sender_mail",
"type": "email",
"value": null,
"rules": "required|min:3|max:64",
"options": [],
"default_value": null,
"multiple": false,
"readonly": false,
"placeholder": "Sender Email",
"info": "Example value of how to fill the input"
}
]
}
Under "src/components/form.js" is form.js file that converts json data to React.js components. The code of form.js is
import React, { Component } from 'react';
class Form extends Component {
constructor(props) {
super(props);
this.state = {
isLoaded: false,
form_inputs: []
};
}
componentDidMount() {
fetch('../test-json/form-inputs.json')
.then(res => res.json())
.then(
(result) => {
this.setState({
isLoaded: true,
form_inputs: result.form_inputs
});
});
}
render() {
const {isLoaded, form_inputs} = this.state;
if(!isLoaded) {
return <div>Loading...</div>
}else{
return (
<div>
<ul>
{form_inputs.map(form_input => (
<li>
{form_input.label}
</li>
))}
</ul>
</div>
)
}
}
}
export default Form
Please can somebody help me with this problem?
Thank you very much in advance!

Answer 1

Import your json file. No need it parse it, javascript interpreter will automatically parse it for you. You don't need a state anymore in your component. Just loop in the imported json.
import React from "react";
import ReactDOM from "react-dom";
import formData from "./formData.json";
function App() {
return (
<div className="App">
<ul>
{formData.form_inputs.map(form_input => (
<React.Fragment>
<label for={form_input.label}>{form_input.label}</label>
<input
key={form_input.label}
id={form_input.label}
type={form_input.type}
name={form_input.name}
defaultValue={form_input.default_value}
placeholder={form_input.placeholder}
/>
</React.Fragment>
))}
</ul>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
Here is a codesandbox link to see it in action.