Unable to render react elements which are returned by a function

Question

Below is my component for FileImport,

import React, {Component} from 'react';
import FileInput from 'react-simple-file-input';
import XLSX from 'xlsx';

var allowedFileTypes = ["application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"];

function fileIsIncorrectFiletype(file){
  if (allowedFileTypes.indexOf(file.type) === -1) {
    return true;
  } else {
    return false;
  }
}

class FileImport extends Component {
  constructor(props, context) {
    super(props, context);

    this.cancelButtonClicked = this.cancelButtonClicked.bind(this);
    this.resetCancelButtonClicked = this.resetCancelButtonClicked.bind(this);
    this.showProgressBar = this.showProgressBar.bind(this);
    this.updateProgressBar = this.updateProgressBar.bind(this);
    this.handleFileSelected = this.handleFileSelected.bind(this);
    this.state = {
      cancelButtonClicked: false
    };
  }

  render(){
    return(
      <div>
        To upload a file:

         <label >
            <FileInput 
              readAs='binary'
              style={ { display: 'none' } }

              onLoadStart={this.showProgressBar}
              onLoad={this.handleFileSelected} 
              onProgress={this.updateProgressBar} 
              cancelIf={fileIsIncorrectFiletype}
              abortIf={this.cancelButtonClicked}
              onCancel={this.showInvalidFileTypeMessage}
              onAbort={this.resetCancelButtonClicked}
             />

           <span >
            Click Here  
           </span>

         </label>
         <span>
         {this.handleFileSelected()}
         </span>
      </div>
    );
  }

  cancelButtonClicked(){
    return this.state.cancelButtonClicked;  
  }

  resetCancelButtonClicked(){                                                                 
    this.setState({ cancelButtonClicked: false });
  }

  showInvalidFileTypeMessage(file){
    window.alert("Tried to upload invalid filetype " + file.type);
  }

  showProgressBar(){
    this.setState({ progressBarVisible: true});
  }

  updateProgressBar(event){
    this.setState({
      progressPercent: (event.loaded / event.total) * 100
    });
  }

  handleFileSelected(event, file){
    this.setState({file: file, fileContents: event.target.result});
    var reader = new FileReader();
        var fileContents = event.target.result;
        var workbook = XLSX.read(fileContents, {
        type: 'binary'
      });
      workbook.SheetNames.forEach(function(sheetName) {
        var XL_row_object = XLSX.utils.sheet_to_row_object_array(workbook.Sheets[sheetName]);
        let studentList = [];
        for(let i =0; i<XL_row_object.length; i++){
            studentList.push(
  <table>
              <tbody>
                <tr>
                    <td type="text" value={XL_row_object[i].Roll_Number} />
                    <td type="text" value={XL_row_object[i].Name} />
                    <td type="text" value={XL_row_object[i].Attendance} />
                </tr>
                </tbody>
                </table>
            )   
        }
        return studentList || null;
      })
    reader.onerror = function(ex) {
      console.log(ex);
    };

    reader.readAsBinaryString(file);
  };

}

export default FileImport;

And this is my other component where i am including FileImport,

import React, {Component} from 'react';
import Checkbox from 'react-checkbox';
import Login from './Login';
import FileImport from './FileImport'
import '../Styles/Attendance.css'
import JsonTable from 'react-json-table';

class Attendance extends Component{
    render(){
        var checked = null;
        return(
            <div>
                <Login />
                <h3 className="text-center"> Attendance sheet for the student</h3>
                <span className="heading">
                <label id="heading-font"> Roll Number</label>
                    <label id="heading-font"> Name of the Student</label>
                    <label id="heading-font"> Attendance </label>
                    <input type="date" />
                </span>
                <FileImport />

            </div>
        );
    }
}
export default Attendance;

When i run this, it throws the following errors,

Errors in console - 1

Errors is console - 3

This happens if i call the function with {this.handleFileSelected()}, but if i call the function with {this.handleFileSelected} it does not throw the error but the data is not displayed although the return object has all the elements that needs to be displayed.

Answer 1

You should simply invoke your function :

{this.handleFileSelected()}