Ok so the pany I'm working in, wants a blog feature on their React website and all of the information from that blog will be stored inside a JSON file. My problem right now is that they also want the React app to allow to edit the JSON file containing all of the information regarding the blog, through the front end. I've tried to change the location of the JSON file to see if that would allow me to edit it, but I can't edit the file whether it's on the public folder or on the src folder. I'm kind of new to react and I don't know exactly where to store the JSON file, in which folder should I store it? And how do I edit the file?

Ok so the pany I'm working in, wants a blog feature on their React website and all of the information from that blog will be stored inside a JSON file. My problem right now is that they also want the React app to allow to edit the JSON file containing all of the information regarding the blog, through the front end. I've tried to change the location of the JSON file to see if that would allow me to edit it, but I can't edit the file whether it's on the public folder or on the src folder. I'm kind of new to react and I don't know exactly where to store the JSON file, in which folder should I store it? And how do I edit the file?

• javascript
• reactjs

3 Answers 3

You can use some JSON editor like react-ace

Put your json file in assets, then import it to your ponent and follow the guide on the README! Your ponent would look like:

const [text, setText] = useState(JSON.stringify(yourJsonFile, null, 2));

function handleChange(text, event) {
  try {
    setText(text && JSON.parse(text));
  } catch (error) {
    // pass, user is editing
  }
}

return (
  <AceEditor
    mode="java"
    theme="github"
    onChange={handleChange}
    name="UNIQUE_ID_OF_DIV"
    editorProps={{ $blockScrolling: true }}
    value={text}
  />
);

In a React project, all your source code and assets are in the src folder. The piler will put everything you need in the public folder. If the JSON file is not copied, you might need a plugin that copies static files to the public folder.

About your other question: do you want the user to be able to edit the JSON as a text string? Then you can just load the JSON and keep it as a string. That string you could put into some text input field. It could look something like this:

fetch('assets/myfile.json')
    .then(responseString => {
        myEditableTextField.value = responseString
    })

To store the results after the user edited it, you will still need some kind of server page (NodeJS or PHP) that can save the file back to a JSON file after editing.

But note this is still bad practice. There is an extremely high chance that the JSON will not be correct after the user has edited it.

It would be better to build some kind of CMS that edits all the JSON properties separately.

fetch('assets/myfile.json')
    .then(responseString => responseString.json())
    .then(data => {
        myEditablenameField.value = data.name
        // etc. for all values in the json file
    })

It would be easy for you, if you load JSON directly into your React app as a response from API call. Instead of downloading .json file.

axios.get("www.website./json").then((response)=>{
   let someData = JSON.parse(response);
   // do whatever you want to do with 'someData'
   // you could make post request to save edited data
   axios.post("www.website./save-json", {editedJSON: JSON.stringify(someData)})

});