React - How to pass data from html to React constructor

Question

I am learning react and playing around it. My existing project is using java from the backend and planning to integrate React at the frontend. I am having challenge, when the page got loaded first time, java will return a jsp with list of items. I need to pass this list of items into React constructor for state initialize.

How to pass the list to React constructor?

Thanks!!!

The following are my program:-

import React from 'react';
import ReactDOM from 'react-dom';

class ItemList extends React.Component {
   constructor(props) {
      super(props);
      this.state = {
         itemList: this.props.items;
      };
   }

   render() {
      return (
         <div>
            <table id="item-table" className="table table-hover">
               <tbody>
                  {this.state.itemList.map((item, i) => <TableRow key = {i} item = {item} />)}
               </tbody>
            </table>
         </div>
      );
   }
};

class TableRow extends React.Component {
   render() {
      return (
         <tr>
            <td>{this.props.item.name}</td>
            <td>{this.props.item.no}</td>
            <td>{this.props.item.amount}</td>
         </tr>
      );
   }
}

export default ItemList;

ReactDOM.render(<ItemList/>, document.getElementById('item-list'));

First you need to create a JS object which will contains the items from the jsp, then you need to pass it as props of the ItemList component : ReactDOM.render(<ItemList items={yourItemsJsObject}/>, document.getElementById('item-list')); — Olivier Boissé
– Olivier Boissé, Commented Apr 7, 2017 at 15:32
thanks for your replied. but how can i set the list into the ReactDOM.render? ReactDOM.render is located in the jsx file. — stanicmail
– stanicmail, Commented Apr 7, 2017 at 15:36
you need to store the JS object as global variable in your jsp, then you can access it in the ReactDOM.render function. I think it's a bad idea to transmit js object from your jsp to react, it will be better to call an ajax service directly in the componentWillMount method to retrieve the list of items — Olivier Boissé
– Olivier Boissé, Commented Apr 7, 2017 at 15:48
better to do it in componentDidMount to avoid some issues — Olivier Boissé
– Olivier Boissé, Commented Apr 7, 2017 at 15:55
if I do it in componentDidMount mean i have to return an empty page without the list and use ajax call to get the list from the server again? mean it will hit the server 2 times for the list to display. — stanicmail
– stanicmail, Commented Apr 7, 2017 at 16:00

Russ Brown · Accepted Answer · 2018-12-10 17:10:09Z

Keeping things true to the way you have it now

Insert the list into a javascript file on the page and make it accessible

Inside a componentDidMount update the state with something like

componentDidMount() {
    this.setState({ myList: global.MYCOMPANY.myList });
}

You can also move your fetch to something inside your component. This is where you can start to leverage other pieces of react ecosystems like redux/thunk or just DIY....

    componentDidMount() {
        fetch('/getList')
            .then((rs) => {
                this.setState({ myList: rs });
            })
    }

I used arrow functions for brevity. The render method in your class will get called every time your state changes. You can choose to return nothing, empty lists or even a loading icon here if need be. This is still fairly entry level of a solution or works for tiny projects, but is a good place to start before looking to scale outwards.

Collectives™ on Stack Overflow

React - How to pass data from html to React constructor

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