title: How to display data read from a file using Electron and React?
body: <p>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 <em>how to display it</em>.</p>
  
  <p>Here's what I have for my file read:</p>
  
  <pre><code>export function read() {
    let values = [];
  
    fs.readFile(
      path.resolve(__dirname, './files/test.txt'),
      'utf-8',
      (err, data) =&gt; {
        if (err) throw err;
        values = data.toString().split('\n');
  
        const listItems = values.map(val =&gt; &lt;p&gt;{val}&lt;/p&gt;);
        return listItems;
      }
    );
  }
  </code></pre>
  
  <p>This works correctly, and I've console logged all the correct values.</p>
  
  <p>The part that's confusing me is when I want to display it. Here's my react component:</p>
  
  <pre><code>// @flow
  import React, { Component } from 'react';
  import styles from './ReadFile.css';
  import { read } from '../actions/fileread';
  
  type Props = {};
  
  export default class ReadFile extends Component&lt;Props&gt; {
    props: Props;
  
    render() {
      const result = read();
  
      return (
        &lt;div className={styles.container} data-tid="container"&gt;
          &lt;p&gt;Read from File&lt;/p&gt;
          {result}
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>What I would expect this to do is call the <code>read</code> function, store it in <code>result</code> and then print the results with <code>{result}</code>. What it does instead is display nothing. It also gives no errors.</p>
  
  <p>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.</p>