Calling React JS from jsp

Question

I am new to React, and I'm making a webpage to show a list of items.

I have this React Code in a file called admins.js:

 //more code

    var AdminsBox = React.createClass({
    getInitialState: function() {
        return {adminsList: []};
    },
    setAdminsArray: function(data) {
        this.setState({adminsList: data});
    },
    render: function() {

        return (
            <div>
                <AdminsContentBox adminsList={this.state.adminsList}/>
            </div>
        );
    }});

    var AdminsBoxRender = ReactDOM.render(
        <AdminsBox />,
        document.getElementById('adminsContent')
    );

And in the file index.jsp:

    <html lang="es">
    <head>
        <link rel="stylesheet" href="base.css" />
        <script src="react.js"></script>
        <script src="react-dom.js"></script>
        <script src="browser.js" charset="utf-8"></script>
        <script src="jquery.min.js"></script>
        <script src="marked.min.js"></script>

        <link rel="stylesheet" href="fonts.css">
        <link rel="stylesheet" href="material.indigo-blue.min.css">

        <script type="text/babel" src="admins.js"></script>

        <script>
            $(document).ready(function() {
                $.ajax({
                    url: 'myUrlServlet',
                    type: 'POST',
                    data: "function=getAdmins",
                    dataType: "json",
                    success: function(data){
                        AdminsBoxRender.setAdminsArray(data);
                    }
                });
            });
        </script>
    </head>


 <body>
        <div id="adminsContent"></div>
    </body>

The error I get is AdminsBoxRender is not defined.

What am I doing wrong?

Thank you in advance.

QoP · Accepted Answer · 2016-06-16 13:31:20Z

5

That's not the proper way to fetch data for your component, you should fetch it in componentDidMount()

var AdminsBox = React.createClass({
    getInitialState: function() {
        return {adminsList: []};
    },
    componentDidMount: function(){
         $.ajax({
                url: 'myUrlServlet',
                type: 'POST',
                data: "function=getAdmins",
                dataType: "json",
                success: function(data){
                    this.setState({adminsList: data});
                }
            });
    },
    setAdminsArray: function(data) {
        this.setState({adminsList: data});
    },
    render: function() {

        return (
            <div>
                <AdminsContentBox adminsList={this.state.adminsList}/>
            </div>
        );
}});


window.AdminsBoxRender = ReactDOM.render(
    <AdminsBox />,
    document.getElementById('adminsContent')
);

You should keep the stuff related to React "inside" React.

edited Jun 16, 2016 at 13:31

answered Jun 16, 2016 at 10:02

QoP

28.5k16 gold badges78 silver badges77 bronze badges

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

3 Comments

JSP749 Over a year ago

Hello, thank you for responding. With the method "componenDidMount" inside the react component, I still get the same error. From your last sentece, I supposed that I cannot access the component outside react?

QoP Over a year ago

You can access from outside, but it's not "safe" since the component may not be rendered yet. You can attach the rendered component to the window object, that way you'll be sure you can access to it anywhere.

JSP749 Over a year ago

Attaching the rendered component to the window object has worked well. Thank you!

Dave Ford · Accepted Answer · 2016-10-14 02:11:21Z

1

Your approach would fall under the heading of "fighting the framework".

I would recommend going with QoP's first recommendation rather than attaching the component to the window object.

answered Oct 14, 2016 at 2:11

Dave Ford

1,9735 gold badges20 silver badges26 bronze badges

Collectives™ on Stack Overflow

Calling React JS from jsp

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related