How to read text file in react

Question

Screenshot1 Screenshot2

I want to read from a text file within the react project, but when i try to execute and read i get a HTML sample code in the console log. This is the function:

`onclick= () =>{         fetch('data.txt')             .then(function(response){                 return response.text();             }).then(function (data) {             console.log(data);         })     };` 

And the button which calls it:

` <button onClick={this.onclick}>click string</button>` 

Answer 1

Simply try the below code and you may understand

import React, { Component } from 'react';  class App extends Component {    constructor(props) {     super(props);   }    showFile = async (e) => {     e.preventDefault()     const reader = new FileReader()     reader.onload = async (e) => {        const text = (e.target.result)       console.log(text)       alert(text)     };     reader.readAsText(e.target.files[0])   }    render = () => {      return (<div>       <input type="file" onChange={(e) => this.showFile(e)} />     </div>     )   } }  export default App; 

Answer 2

If you want to get a .txt file first you have to import it:

   import raw from '../constants/foo.txt'; 

After that, you could fetch it and transform into text:

fetch(raw)   .then(r => r.text())   .then(text => {     console.log('text decoded:', text);   });