Как в React вернуть массив, а не элемент?

Question

[VeryLongAgoDid]

Сделал компонент который читает файл и преобразует его в массив. Именно массивом я и хочу его передать в другой компонент, пусть это будет App.js.

render() {
	var mass = this.state.text.split('\n');
	console.log(mass);
	return mass;
}

Результат console.log(mass)

(3) ["1", "2", "3"]
0: "1"
1: "2"
2: "3"
length: 3
__proto__: Array(0)

И в файле App.js я хочу получить этот же массив, но возвращается уже как элемент Реакта. Как это можно обойти?
Вот так я получаю данные из компонента

var myTxt = require("./input.txt");
console.log(myTxt);
var mass = <TextFileReader txt={myTxt}/>
console.log("massive:", mass);

Результаты console.log()

/static/media/input.c779c72e.txt
massive: {$$typeof: Symbol(react.element), type: ƒ, key: null, ref: null, props: {…}, …}

Comments

[Роман Александрович]

что вам мешает скормить не компонету а функции?

function translate(val){
 var mass = val.split('\n');
  console.log(mass);
  return mass;
}

var myTxt = require("./input.txt");
console.log(myTxt);
var mass =translate(myTxt)/>
console.log("massive:", mass);

[Ваге]

Роман Александрович, а может быть у него там есть жизненные циклы в компоненте

[Роман Александрович]

Ваге, ну так это уже другой вопрос. Есть проблема и я предложил ее решение.

[VeryLongAgoDid]

<div className="File-input">
	<TextFileReader txt={myTxt} />	
</div>

Просто интересно получается. Этот код выводи всё как положенно. Может я могу как-то передать в переменную результат этой функции как текст?
Попробовал ещё такой способ, но возвращает пустую строку

var mass = ReactDOMServer.renderToString(<TextFileReader txt={myTxt}/>);

Answer 1

[hzzzzl]

как-то так?

// App

state = { mass: [] }

onFileRead = mass => {
  this.setState({ mass: mass })
}

render () {
  // console.log(this.state.mass)
  return <TextFileReader txt={myTxt} onFileRead={this.onFileRead}/>
}

// TextFileReader 

readFile = mass => {
  this.props.onFileRead(mass) 
  // когда будет готов массив, то пусть он прокинется наверх в App
}

Comments

[VeryLongAgoDid]

Боялся чего-то такого, что надо будет ожидать изменения состояний. А можно как-то задержать выполнение пока не будет получен текст?

[hzzzzl]

VeryLongAgoDid, ну если файл ридер работает через это
https://developer.mozilla.org/ru/docs/Web/API/File...
то выполнять this.props.onFileRead(myFile) когда текст будет получен в файлридере FileReader.onload

я вообще не уверен, нужен ли этот TextFileReader компонент, он ведь не рисуется на странице, а просто читает файл? тогда лучше бы его просто в функцию вынести

[VeryLongAgoDid]

hzzzzl, да, пожалуй так будет лучше. Надо будет только из класса в функцию всё это перекрутить. Спасибо