React: Why won't this React Component render?

Question

I'm in the process of writing a desktop application in React using Electron and Meteor.js

I have the following React Component class:

import React from "react"

export class MemoryMap extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            memory : [],
            mem_max : 0xFFFF,
        }

        this.readByte = function(byte){
            return this.state.memory[byte];
        };

        this.writeByte = function(mem_addr, byte){
            if(mem_addr >= 0 && mem_addr < this.state.mem_max) {
                this.state.memory[mem_addr] = byte;
            }
        };

        for(let i = 0; i < 10000; i++){
            this.state.memory[i] = 0x0000;
        }



    }

    render(){
        return(
            <div>
                <h1>{this.state.memory[0x0000]}</h1>
            </div>
        );
    }
}

export const MemMap = new MemoryMap();

I attempt to render this class in Main.jsx as such:

import React from 'react';
import { Meteor } from 'meteor/meteor';
import { render } from 'react-dom';
import {MemMap} from "./CPU_Elements/MemoryMap";


Meteor.startup(() => {

  render(<MemMap/>, document.getElementById("react-target"));
  Desktop.send("desktop", "init");
});

When called this way, the program crashes on this line. The Desktop.send function is never called.

If I re-write MemoryMap as such, where the render function becomes a class method:

import React from "react"

export class MemoryMap extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            memory : [],
            mem_max : 0xFFFF,
        }

        this.readByte = function(byte){
            return this.state.memory[byte];
        };

        this.writeByte = function(mem_addr, byte){
            if(mem_addr >= 0 && mem_addr < this.state.mem_max) {
                this.state.memory[mem_addr] = byte;
            }
        };

        for(let i = 0; i < 10000; i++){
            this.state.memory[i] = 0x0000;
        }

        this.render = function(){
            return(
                <div>
                    <h1>{this.state.memory[0x0000]}</h1>
                </div>
            );
        }

    }


}

export const MemMap = new MemoryMap();

And the main.jsx file is re-written to call that method:

import React from 'react';
import { Meteor } from 'meteor/meteor';
import { render } from 'react-dom';
import {MemMap} from "./CPU_Elements/MemoryMap";


Meteor.startup(() => {

  render(MemMap.render(), document.getElementById("react-target"));
  Desktop.send("desktop", "init");
});

The element renders just fine.

Why is this? Why can't I use the HTML tag formatting, as shown in React's tutorials?

yaya · Accepted Answer · 2020-08-05 18:15:14Z

1

change this:

export const MemMap = new MemoryMap();

to:

export const MemMap = MemoryMap;

Since you should export the component defination, not creating an instance of it and exporting it. (that's why obj.render() works but <obj/> doesn't.)

answered Aug 5, 2020 at 18:15

yaya

8,3311 gold badge48 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Tim Finnegan Over a year ago

This solves my problem. I just have a quick followup question: Does exporting the definition call the constructor? Like, does this now act as a static version of the class that I can initialize and use globally?

yaya Over a year ago

@TimFinnegan no, constructor is not called just by defining it. a class is just like a function definition. when you define it, it won't get called. and when you create an instance of it, it will call the constructor and it and ... and yes as you said it's like a defination and you can create objects from it globally.

Collectives™ on Stack Overflow

React: Why won't this React Component render?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related