How to render a text file from a URL using reactjs

Question

With code below, I am able to render the content of the local text file to the web page, but when I use a URL to get the text file to render it on the webpage, I get " " because the state is defined null. To render a local text file I had to use import text from './filepath.txt. How I can render text content from a URL link?

import React, { Component } from "react";
import "./App.css";
import text from "./myText.txt";

class App extends Component {

state = { loading: true,
          docText: null,
    };

componentDidMount() {

        fetch( text, { mode: "no-cors" }
            // { 
            //   method: "GET",
            //   headers: {
            //     "Content-Type": "application/text",
            //   },
            // }
           ).then((response) => { return response.text();})
            .then((data) => {
            this.setState({ docText: data, loading: false });
            console.log({ docText: data });
                })
            .catch((error) => { console.log(error);
             });
      }

render() { 
    return (
         <div className="App">
     <h1>Fetched Data</h1>
         <div>
             {this.state.loading || !this.state.docText ? (
             <div>Loading...</div>
                  ) : ( 
            <div> 
            <div>{this.state.docText}</div>
            </div>
            )}
            </div>
            </div>
            );
        }
}
export default App;

You can use iframe for that. <iframe src={src} height={someHeight} width={someWidth} id = "frame" /> Here src prop value would be your URL — Nemanja
– Nemanja, Commented Aug 5, 2021 at 11:09

Dificilcoder · Accepted Answer · 2021-08-05 11:15:12Z

2

Before rendering the content to the DOM, verify whether the file is read from the url.

Please try the below code,

fetch("https://URL/file").then((r)=>{r.text().then(d=>console.log(d))})

try steps mentioned in this question Get text from a txt file in the url

answered Aug 5, 2021 at 11:15

Dificilcoder

5175 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

xiang Over a year ago

unable to see anything in console.

Dificilcoder Over a year ago

Please check the url, whether the data is available there or it requires some permission (like login credentials or password) to read data from the url

xiang Over a year ago

Data is available in the text file and it doesn't require any permission to access it. You may check the link given in the sandbox code given above.

Collectives™ on Stack Overflow

How to render a text file from a URL using reactjs

1 Answer 1

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Linked

Related