Hey I am trying to get the textfile inside of the jsx(html)render function. I have made the function handleText which reads the text, and just splits the text up. I can see it in the console log but when i for example try to map it or just insert the myTextArr into render it gives me an empty element for instance a paragraph with no content.

here is my code

 import React, { Component } from 'react';
import './App.css';
import blueHc from './hcaWarholBlue.jpg'
import redHc from './hcaWarholRed.jpg'
import illu from './illustration.jpg'
import text from './prinsessen.txt'



const imagesPath = {
  redHc: redHc,
  blueHc: blueHc
}     

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
        blueImage: true,
        myTextArr: []
        
    }
}

toggleImage = () => {
  this.setState(state => ({blueImage: !state.blueImage}));
}

getImageName = () => 
  this.state.blueImage ? 'redHc':'blueHc'


handleText =()=>{
  fetch(text)
  .then((r)=>r.text())
  .then(text => {   
    this.state.myTextArr.push(text.split(",(?=([^\']*\'[^\']*\')*[^\']*$)"));
   
    console.log(this.state.myTextArr)
  })
}

//(",(?=(?:[^\"]*\"[^\"]*\")*[^\"]*$)", -1) REGEX
      /*<img src={blueHc}></img>
      <img src={redHc}></img>
      <img src={illu}></img>*/

      /*<div className="hcA"> 
      <img style={{maxWidth: '50px'}} src={imagesPath[this.getImageName()]} onClick={this.toggleImage} />
      </div>*/

      /* <div>
        {this.state.myTextArr.map(text =>(
          <text>{text}</text>
        ))}
      </div>  */
  render = () => 

  <div>
    <tbody>
      <h1>Prinsessen på Ærten</h1>
      <h5>H.C. Andersen</h5>  
      <p>{this.state.myTextArr}</p>          
        <img style={{maxWidth: '50px', float: "left"}} src={imagesPath[this.getImageName()]} onClick={this.toggleImage} />
      </tbody>
  </div>
  
}

I tried using the map function but without luck so now I just inserted the array inside a p tag but it wont even show there it only loads the p tag