1

Context: I want to load an html file into a react application and display part of it in a help window. The html file can be updated anytime from some content generator, so translating it into jsx is not an option.

Right now I'm trying to load any file (json included) using axios and getting 404 response. I put the call in componentWillMount, componentDidMount, whatever. I've peppered the project with toto.html and toto.json files. I created the app using create-react-app

import React, {Component} from 'react';
import axios from 'axios';

class  Toto extends Component {
componentWillMount  ()  {
    console.log("inside componentWillMount")
    axios 
        .get('./toto.json') 
        .then(response => 
            { console.log("json response=",response);  })
        .catch( error => {
            console.log("json error=",error);} );
    axios
        .get('./toto.html')
        .then(response => 
            { console.log("html response=",response);  })
        .catch( error => 
            { console.log("html error=",error);} );
    console.log("inside componentWillMount 2")
};
render() {
    return (
        <div>
            <h2>Toto TIti Tata</h2>
            <object type="text/html" data="./toto.html" ></object>
        </div>
    )
}};
export default Toto;

Response:

inside componentDidMount Toto.js:11
inside componentDidMount 2 Toto.js:30
html error= Error: "Request failed with status code 404"
createErrorhttp://localhost:3000/static/js/bundle.js:1555:15settlehttp://localhost:3000/static/js/bundle.js:1721:12handleLoadhttp://localhost:3000/static/js/bundle.js:1081:7 Toto.js:27
json error = Error: "Request failed with status code 404"
Francis
  • 702
  • 9
  • 21
  • 1
    why `./toto.json`? it should be `/toto.json` – Arup Rakshit Aug 23 '18 at 11:46
  • sorry, putting `/toto.json` instead of `./toto.json` changes nothing. I put `./toto.json` originally because the file was in the same folder as the component. – Francis Aug 23 '18 at 13:18
  • So you have static todo.json file? Then u can't read it like you are doing using `axios`. You need to setup a small express server, and then using the exposed api, u can read it using axios. – Arup Rakshit Aug 23 '18 at 13:19
  • what do you mean by static? – Francis Aug 23 '18 at 13:20
  • I put the file on a server and now I get _Error: "Network Error"_ . Little by little... – Francis Aug 23 '18 at 14:53
  • but I can say now that you are on right path.. Seems like not all servers are running.. check that. or if urls are correct or not. – Arup Rakshit Aug 23 '18 at 14:54
  • I found a first-level answer here: https://stackoverflow.com/questions/29452822/how-to-fetch-data-from-local-json-file-on-react-native Using require, you can import a json file and use it as a variable. var customData = require('./toto.json'); console.log("customData=", customData) When I try with an html file it says Module parse failed: Unexpected token (1:0) You may need an appropriate loader to handle this file type. – Francis Aug 23 '18 at 15:27

0 Answers0