Retrieve And Display SharePoint List Items Using REST API And ReactJS

React makes it easy to create interactive UIs. It helps us to create simple views for each state in our application, efficiently update and render the right components when our data changes. In this section, we will make use of React and REST api to retrieve list items from SharePoint and display them using Content Editor web part.

Retrieve SharePoint List data using REST API and display using Content Editor Webpart

Elements are the smallest building blocks of React apps.It describes what we want to see on the UI.

const element = <h1>Display me at root node</h1>;

reactdom.render is the starting point of the React component. Let's say we have a <div> somewhere in our HTML file.

<div id="root"></div>

So, to render our React element into the above root DOM node, we will pass both to ReactDOM.render().

const element = < h1 > Display me at root node < /h1>;
ReactDOM.render(element, document.getElementById('root'));

This will display the message at root div. In our case, we will be displaying the data retrieved from 'ProductSales' list in the div named 'CarSalesData'.

ReactDOM.render(<ReactSP />, document.getElementById('CarSalesData'));

ReactSP represents the component that will be rendered at the CarSalesData div. ReactSP which is the component name is defined as plain javascript class which extends React.Component abstract class.We will also define at least one render method within it and will be defining the UI within this render method.

Within the class, we will also have a constructor which is the right place to initialize state. We will update this state with SharePoint data at a later point in the react lifecycle. If we don't have to initialize state and we are not binding any methods, we don't need to implement a constructor for our React component.

Each component has several "lifecycle methods" that we can override to run code at a particular time of the process. Methods that are prefixed with 'will' are called just before some event happens, and methods prefixed with 'did' are called just after an event happens. We will be making use of the 'componentDidMount' method to fetch data from SharePoint List and we will update the state with this data. In the render method, we will then read the state data and display it in the UI.



REACT and REST API script to display SharePoint data as Grid

The code can be saved as a text file and added to the Content Editor WebPart to display the Grid WebPart.

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.4/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.4/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.min.js"></script>
<div id="CarSalesData"></div>
<script type="text/babel">
   var tableStyle  =    {
          display: "table",
          marginLeft : "40px"
      }
   var panelStyle  =    {
         background: "#91A4A7"
      }

   var divStyle = {
    background: "#eee",
    padding: "20px",
    margin: "20px"
   };

   var headerCaptionStyle = {
    background: "#4B6978",
     display: "table-cell",
          border: "solid",
          textAlign : "center",
          width : "500px",
          height : "30px",
          paddingTop : "3px",
          color : "white",
          marginLeft : "80px",
          display : "block"
   };

   var headerStyle = {
    background: "#4B6978",
     display: "table-cell",
          border: "solid",
          textAlign : "center",
          width : "100px",
          height : "30px",
          paddingTop : "10px",
          color : "white"
   };

   var tableCaptionStyle = {
   background: "#c6e2ff",
     display: "block",
     fontSize : "20px",
     fontWeight: "bold",
          border: "solid",
          textAlign : "center",
          width : "650px",
          height : "30px",
          paddingTop : "3px",
          borderRadius: "25px",
          marginLeft : "30px",
          marginTop : "20px"
   }


   var rowCaptionStyle = {
    width : "600px",
    display :  "table-caption",
    background: "#4B6978",
    textAlign : "center",
    padding: "20px",
     fontSize : "20px",
    fontWeight :"bold",
    color : "white"
   };

   var rowStyle = {
    display :  "table-row",
    background: "#eee",
    padding: "20px",
    margin: "20px",
    fontWeight :"bold"
   };

   var CellStyle  =    {
          display: "table-cell",
          border: "solid",
           borderColor : "white",
          textAlign : "center",
          width : "100px",
          height : "30px",
          paddingTop : "10px"

      }

      class ReactSP extends React.Component{
         debugger;
          constructor(){
              super();
                this.state = {
        items: [
          {
            "CarName": "",
            "Quarter1": "",
            "Quarter2":"",
            "Quarter3": "",
            "Quarter4":""
          }
        ]
      };

     }

          componentDidMount() {
              debugger;
             this.RetrieveSPData();
          }

          RetrieveSPData(){
              var reactHandler = this;

              var spRequest = new XMLHttpRequest();
              spRequest.open('GET', "/sites/playground/_api/web/lists/getbytitle('ProductSales')/items",true);
              spRequest.setRequestHeader("Accept","application/json");

              spRequest.onreadystatechange = function(){

                  if (spRequest.readyState === 4 && spRequest.status === 200){
                      var result = JSON.parse(spRequest.responseText);

                      reactHandler.setState({
                          items: result.value
                      });
                  }
                  else if (spRequest.readyState === 4 && spRequest.status !== 200){
                      console.log('Error Occured !');
                  }
              };
              spRequest.send();
          }

          render(){
            debugger;
             return (
        <div style={panelStyle}>
          <br></br>

          <br></br>
          <div style={tableCaptionStyle} > Demo : Retrieve SharePoint List Items using React JS  </div>
          <br></br>

          <div style={tableStyle} >
             <div style={rowCaptionStyle} > Quarterly Car Sales Data </div>
            <div style={rowStyle} >
              <div style={headerStyle}>Car Name</div>
              <div style={headerStyle}>Quarter 1 </div>
              <div style={headerStyle}>Quarter 2</div>
                <div style={headerStyle}>Quarter 3</div>
               <div style={headerStyle}>Quarter 4</div>
            </div>

              {this.state.items.map(function(item,key){

                return (<div style={rowStyle} key={key}>
                    <div style={CellStyle}>{item.CarName}</div>
                    <div style={CellStyle}>{item.Quarter1}</div>
                     <div style={CellStyle}>{item.Quarter2}</div>
         <div style={CellStyle}>{item.Quarter3}</div>
         <div style={CellStyle}>{item.Quarter4}</div>
                  </div>);
              })}

          </div>
        </div>

      );
    }


      }

      ReactDOM.render(<ReactSP />, document.getElementById('CarSalesData'));
</script>

Summary

Thus, we saw how to retrieve and display SharePoint List Items using React JS and REST API.