calling render() function inside a class in ReactJS

Question

I have written a simple ReactJS code in which I am trying to call render() function from inside of the Store class but I am getting error. If I am calling ReactDOM.render() function from outside of the Store class then the this.state.data is not accessible outside of the Store class. So please tell what should I do?

Code:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

class Store extends React.Component {
   constructor(props) {
      super(props);

      this.state = {
         data: 
         [
            {
               name: 'First...',
               id: 1
            },

            {
               name: 'Second...',
               id: 2
            },

            {
               name: 'Third...',
               id: 3
            }
         ]
      }
   };

    render(
        <App storeData={this.state.data} />,
        document.getElementById('app')
    );
}

Error:

ERROR in ./main.js
Module build failed: SyntaxError: C:/Users/username/Desktop/fluxExample/main.js
: Unexpected token (31:2)

  29 |
  30 |  render(
> 31 |          <App storeData={this.state.data} />,
     |          ^
  32 |          document.getElementById('app')
  33 |  );
  34 | }

 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-serve
r ./main.js
webpack: Failed to compile.

Your syntax is not valid at all. Also you seem to be confusing mounting your application and a React component. Your Store probably doesn't need to be a React Component. — Axnyff
– Axnyff, Commented Sep 25, 2017 at 9:05

Shubham Khatri · Accepted Answer · 2017-09-25 09:05:37Z

1

You need to render Store component and then App as a child of Store. The render function inside the Store needs to return a Valid React component like

class Store extends React.Component {
   constructor(props) {
      super(props);

      this.state = {
         data: 
         [
            {
               name: 'First...',
               id: 1
            },

            {
               name: 'Second...',
               id: 2
            },

            {
               name: 'Third...',
               id: 3
            }
         ]
      }
   };

   render() {
       return (
            <App storeData={this.state.data} />
       )
   }

}

ReactDOM.render(
        <Store/>,
        document.getElementById('app')
    );

answered Sep 25, 2017 at 9:05

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

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

Collectives™ on Stack Overflow

calling render() function inside a class in ReactJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related