Trying to render a new instance in ReactJS

Question

As an example (real tried code) I have a component of which I want to initiate a NEW instance for rendering.

import React, { Component } from 'react';

export default class TinyObject extends Component {    
    constructor(props) {
        super(props);
        console.log("TinyObject constructor");
    }

    render() {    
        console.log("TinyObject render");
        return (
            <div>HEY THIS IS MY TINY OBJECT</div>
        );
    }
}

Then in main App constructor I do the following:

var myTinyObject = new TinyObject();
var myArray = [];
myArray.push(myTinyObject);
this.state = {testing: myArray};

Then a created a function to render this:

renderTest()
{
    const {testing} = this.state;

    const result = testing.map((test, i) => {
        console.log(test);
        return {test};
    });  
}

And I call this from the App render function like this:

render() {
     const { gametables, tableActive } = this.state;

    console.log("render");
    return <div><div>{this.renderTest()}</div></div>;
}

It runs, no errors. I see console log of the following:

console.log("TinyObject constructor");
console.log(test);

But I don't see console log of the TinyObject render nor do I see the render output.

Thanks to lustoykov answer I got a little further

JSX: var myTinyObject = <TinyObject />;

works!

but in the real app I add a little more and don't know how to do it here.

return <GameTable key={'gt'+index} data={table} settings={this.settingsData} sendTableNetworkMessage={this.sendTableNetworkMessage} />

this is the way I was rendering; and I needed more instances of GameTable now the question is; how do I add the arguments like data & settings to myTinyObject.

thanks for helping so far.

What is the main purpose of this? What actually you want to do - render an array? — Ivan Burnaev, Jul 14 '17 at 21:14
In the real app its a gametable class with a lot of state. So now I can render this once but player should be to able/start as many gametables as he wants. In my example i use the NEW keyword because i am used to that way of creating a new instance but if there is any other way to accomplish the same thing its fine.I just need multiple gametables. — Reneb, Jul 14 '17 at 21:18
It is too imperative way. One of the main points of React is declarativity. Try to split up UI components and components with some business logic. If you'll get a more information about your task I'll try to help you. — Ivan Burnaev, Jul 14 '17 at 21:24

Lyubomir · Accepted Answer · 2017-07-14T21:37:26.583

4

You don't manually instantiate react component, use JSX or createElement. For instance

via JSX

var myTinyObject = <TinyObject prop1={prop1} prop2={prop2} />;

via React.createElement

var myTinyObject = React.createElement(TinyObject, { prop1, prop2 }, null);

edited Jul 14 '17 at 21:37

answered Jul 14 '17 at 21:14

Lyubomir

19,615
6
55
69

Thanks for this answer; i tried the JSX version and it works, great! but still one thing left i need to supply arguments (i update post to show what I mean) – Reneb Jul 14 '17 at 21:26
hey, pass the arguments here when you initialize var myTinyObject = ; – Lyubomir Jul 14 '17 at 21:36
thank you very much, your solution works. awesome! And I apologize to everyone that I abuse ReactJS. – Reneb Jul 14 '17 at 22:13

score 1 · Answer 2 · answered Jul 14 '17 at 21:45

I would definitely check out some tutorials and how React works at a basic level. You aren't really going to call your react components like you would normally do in javascript since the render function returns jsx.

Fundamentally, React is what is called a single page application. That means that your browser will load up a single html file with a div. Now that div will be where React performs its magic by using Javascript to change stuff around.

It is easiest for me to think of React as a tree. You create these components that you place on the DOM or in your HTML and React will add and remove them downwards. For instance, take a look at this picture of twitter.

So first the Feed component is going to be put on the DOM. Then the Feed component will render the Tweet components. So as you can see the rendering goes in one direction, downwards.

Now, as you can see your render methods are not returning javascript. It is returning something that looks like HTML but we call it JSX. That means we want to render it a little differently with our react classes.

If we have a child component:

class Child extends React.Component {
  render() {
    return <h1>Hello, I am inside the parent component</h1>;
  }
}

We can call the render method like this:

class Parent extends React.Component {
  render() {

    <Child />  //This is how I use the Child class
  }
}

Now the reason why react is so performant is that the child cannot be re-rendered unless we do 1 of two things:

It is a component with a state and we call a method setState()
We pass down new props to a child component from the parent component

You can read about it here

Now the only way to get React to call that render function again is by doing those two things.

Trying to render a new instance in ReactJS

2 Answers2