How to display data read from a file using Electron and React? - node.js

Question

My goal is simply to display data (using React) from a file stored locally with my Electron app. I've gotten halfway there in actually reading and processing the data, I just can't figure out how to display it.
Here's what I have for my file read:
export function read() {
let values = [];
fs.readFile(
path.resolve(__dirname, './files/test.txt'),
'utf-8',
(err, data) => {
if (err) throw err;
values = data.toString().split('\n');
const listItems = values.map(val => <p>{val}</p>);
return listItems;
}
);
}
This works correctly, and I've console logged all the correct values.
The part that's confusing me is when I want to display it. Here's my react component:
// #flow
import React, { Component } from 'react';
import styles from './ReadFile.css';
import { read } from '../actions/fileread';
type Props = {};
export default class ReadFile extends Component<Props> {
props: Props;
render() {
const result = read();
return (
<div className={styles.container} data-tid="container">
<p>Read from File</p>
{result}
</div>
);
}
}
What I would expect this to do is call the read function, store it in result and then print the results with {result}. What it does instead is display nothing. It also gives no errors.
I have a feeling this has to do with some odd server/client relationship between the react frontend and the node.js "backend" reading the file. I'm not sure how to create a simple interface between these two components to get them to work.

Answer 1

As mentioned in my comment your code is async and your read() method is not returning anything. You should have something close to this:
export default class ReadFile extends Component<Props> {
props: Props;
constructor(props) {
super(props);
this.state = {};
}
componentDidMount() {
read((result) => {
this.setState({
result,
});
});
}
render() {
return (
<div className={styles.container} data-tid="container">
<p>Read from File</p>
{this.state.result}
</div>
);
}
}
And for read() this:
export function read(callback) {
let values = [];
fs.readFile(
path.resolve(__dirname, './files/test.txt'),
'utf-8',
(err, data) => {
if (err) throw err;
values = data.toString().split('\n');
const listItems = values.map(val => <p>{val}</p>);
return callback(listItems);
}
);
}