react_home.js

import React from 'react';

import $ from 'jquery';

import background from './images/hero_2.jpg';

class Home extends React.Component {

    constructor(){

        super();

        this.state = {

            myJsonTask:[],

            image:"url('"+background+"')"

        }

    }

    componentDidMount(){

        this.getData();

    }

    getData(){

        let reactHandler = this;

        let urlVal = "https://mercedessaga.sharepoint.com/sites/timesheetapplication/_api/web/lists/getbytitle('Banner Info')/items?$select=*"

        $.ajax({

            url: urlVal,

            type: "GET",

            async:false,

            headers: {

                "accept": "application/json;odata=verbose",

                "content-Type": "application/json;odata=verbose",  

                "X-RequestDigest": $("#__REQUESTDIGEST").val() 

            },

            success: function (data) {

                console.log(data.d.results);

                let results = data.d.results;

                reactHandler.setState({myJsonTask: results});

            },

            error: function (error) {

                console.log(JSON.stringify(error));

            }

        });

    }

    render(){

        return (

            <div className="container-fluid">

            {this.state.myJsonTask.map((mjson)=>(

                <div className="site-blocks-cover overlay aos-init aos-animate" data-aos="fade" style={{backgroundImage:this.state.image}}>

                    <div className="container">

                        <div className="row align-items-center justify-content-center">

                            <div className="col-md-12 aos-init aos-animate" data-aos="fade-up" data-aos-delay="400">                        

                                <div className="row mb-4">

                                    <div className="col-md-6">

                                        <h1>{mjson.Title}</h1>

                                        <p className="mb-5">{mjson.desc}</p>

                                        <div>

                                        <a href="/users" className="btn btn-primary mr-2 mb-2">Create Ticket</a>

                                        </div>

                                    </div>

                                </div>

                            </div>

                        </div>

                    </div>

                </div>

            ))}

            </div>

        )

    }

}

export default Home;