How to import a .txt file from my source?

Question

I try to import a .txt file to show the text in a text box.

My code:

import React, { Component } from 'react'; import './LoadMyFile.css'; import myText from './sample.txt';  export default class LoadMyFile extends Component {     render() {     return (       <div>               <button onClick={this.handleClick} className="LoadMyFile" name="button" variant="flat">test string</button>       </div>     )   }     handleClick = () => {     console.log(myText);   }    } 

But i see in console: /static/media/sample.f2e86101.txt

What is going wrong here?

Answer 1

I've solved my problem.

  handleClick = () => {      fetch('/sample.txt')     .then((r) => r.text())     .then(text  => {       console.log(text);     })     }  

Tis link did help: Fetch local JSON file from public folder ReactJS

Answer 2

Not wanting to use fetch as it makes me have to deal with async responses. I solved my problem like this.

1. Created a seperate .js file and assigned my text to a variable
2. Exported the variable

const mytext = `test  this is multiline text.  more text`;  export default mytext ; 

3. In my other component, I import the file.

import mytext from './mytextfile.js'; 

4. I am now free to assign it to a variable or use it anywhere in my component.

 const gotTheText = mytext;  return (<textarea defaultValue={gotTheText}></textarea>);