Trying to fetch data from Site Content in React Sharepoint in tsx file

Question

I am new to React Sharepoint and I have list of items and data stored in Site Content in sharepoint. But I don't know how to fetch and display data items in React Sharepoint with the help of click button?

Answer 1

Please refer this demo to fetch SharePoint list item data in React SPFX WebPart using Rest API:

import * as React from 'react';  
import styles from './ReactGetItems.module.scss';  
import { IReactGetItemsProps } from './IReactGetItemsProps';  
import { escape } from '@microsoft/sp-lodash-subset';  
import * as jquery from 'jquery';  
  
export interface IReactGetItemsState{    
  items:[    
        {    
          "EmployeeName": "",    
          "EmployeeId": "",    
          "Experience":"",    
          "Location":""  
        }]    
}    
  
export default class ReactGetItems extends React.Component<IReactGetItemsProps, IReactGetItemsState> {  
  
  public constructor(props: IReactGetItemsProps, state: IReactGetItemsState){    
    super(props);    
    this.state = {    
      items: [    
        {    
          "EmployeeName": "",    
          "EmployeeId": "",    
          "Experience":"",    
          "Location":""  
        }    
      ]    
    };    
  }    
    
  public componentDidMount(){    
    var reactHandler = this;    
    jquery.ajax({    
        url: `${this.props.siteurl}/_api/web/lists/getbytitle('EmployeeList')/items`,    
        type: "GET",    
        headers:{'Accept': 'application/json; odata=verbose;'},    
        success: function(resultData) {             
          reactHandler.setState({    
            items: resultData.d.results    
          });    
        },    
        error : function(jqXHR, textStatus, errorThrown) {    
        }    
    });    
  }    
    
  
  public render(): React.ReactElement<IReactGetItemsProps> {  
     return (    
  
        <div className={styles.panelStyle} >   
          <br></br>  
     
          <br></br>   
          <div className={styles.tableCaptionStyle} > Demo : Retrieve SharePoint List Items using SPFx , REST API  & React JS  </div>  
          <br></br>  
           <div className={styles.headerCaptionStyle} > Employee Details</div>  
          <div className={styles.tableStyle} >     
              
            <div className={styles.headerStyle} >    
              <div className={styles.CellStyle}>Employee Name</div>    
              <div className={styles.CellStyle}>Employee Id </div>    
              <div className={styles.CellStyle}>Experience</div>    
                <div className={styles.CellStyle}>Location</div>    
                       
            </div>    
              
              {this.state.items.map(function(item,key){    
                  
                return (<div className={styles.rowStyle} key={key}>    
                    <div className={styles.CellStyle}>{item.EmployeeName}</div>    
                    <div className={styles.CellStyle}>{item.EmployeeId}</div>    
                     <div className={styles.CellStyle}>{item.Experience}</div>  
                      <div className={styles.CellStyle}>{item.Location}</div>  
            
                  </div>);    
              })}    
                      
          </div>    
        </div>    
    );    
  }      
}  

Reference:

Create SharePoint Framework Web Part To Retrieve SharePoint List Items Using REACT And REST API