How can I get data from a local file into my React app?

Since you mentioned in comments that you used create-react-app for your project, the best solution at the moment would be a babel plugin called Raw.Macro.

This plugin allows you to access content of your files without a need to create-react-app eject. Provides really elegant solution without any boilerplate code.

Note: There is a small drawback that you have to re-start your webpack dev server when the file changes, because the content of a file is being embedded during the build process.

    import raw from 'raw.macro';

    function foo(){
        const jsonContent = raw('../utils/stops.json');
        console.log(jsonContent);
    }

You could use:

<input type=file></input> 

and have the user manually give the file to your app.


What are you using to bundle your application? If you're using Webpack, you can use the raw-loader and directly import the txt file into your app.

Raw loader: https://github.com/webpack-contrib/raw-loader

Then you can simply: import txt from 'file.txt';

Either way you need to pull the data from your local file system and include it in your bundle using some method.