How can we display backend data in react.js?

Question

How we display data which we get from backend in and display in react.js? The backend data is below. I want to get the date and time value and notes from that object.

Here I use global variable to store the response and the stor the global variable into state variable.

I need to render notes data and date and time from backend and display in the render method.

$.ajax({
        method: 'GET',
        url: 'http//.. //...',
        data: userDetails,
        dataType: 'json',
        jsonp: false,
        success: function(response) {
          MyVariables.userRecordFeed = response;
          console.log(  MyVariables.userRecordFeed)
          record_exist= response[0].record_exist
          MyVariables.medata_content= response[0].notes
          console.log(MyVariables.medata_content);
        }.bind(this),
        error: function() {
          console.log('There is a problem with server');
        }
      });

      this.setState({userRecordFeed:MyVariables.userRecordFeed, loadRecordNewsfeed: MyVariables.loadRecordNewsfeed, loadRecordOverlay: MyVariables.loadRecordOverlay,
           showAddRecordIconsIntro: MyVariables.showAddRecordIconsIntro})

    }
  render()
  {
      if(record_exist === 'yes') {
          console.log('exists');
      }
      else {
             userRecordFeedData = <div className="card">
             <div className="row card-header">
                 <div className="col-xs-2 col-sm-2 col-md-2 card-name-icon">
                   <span className="card-name-symbol">AJ</span>
                 </div>
                 <div className="col-xs-8 col-sm-8 col-md-8 card-name-time-date">
                    <div className="card-name">
                      Joined Medata
                    </div>
                    <div className="card-date">
                      5/04/2017
                    </div>
                    <span className="card-time">
                      12:55 PM
                    </span>
                </div>
                <div className="col-xs-2 col-sm-2 col-md-2 card-functionality">
                  <span className=" functionality-icon fa fa-ellipsis-v"></span>
                </div>
            </div>
            <div className="row card-bottom">
                 <div className="col-xs-2 col-sm-2 col-md-2 card-bottom-dots">
                   <div className="bottom_left_side_menu_icon">
                   </div>
                   <div className="bottom_left_side_menu_icon">
                   </div>
                   <div className="bottom_left_side_menu_icon">
                   </div>
                   <div className="bottom_left_side_menu_icon">
                   </div>
                   <div className="bottom_left_side_menu_icon">
                   </div>
                   <div className="bottom_left_side_menu_icon">
                   </div>
                   <div className="bottom_left_side_menu_icon">
                   </div>
                   <div className="card-bottom_left_side_menu_icon">
                   </div>
                   <div className="card-bottom_left_side_menu_icon">
                   </div>
                   <div className="landing-join-bottom_left_side_menu_icon">
                   </div>
                 </div>
                 <div className="col-xs-9 col-sm-9 col-md-9 ">
                   <p className="">Lorem Ipsum is simply dummy text of the printing and typesetting industry
                     Lorem Ipsum has been the industry  standard dummy text ever since the 1500</p>

                   </div>
                 <div className="col-xs-1 col-sm-1 col-md-1"></div>
            </div>
          </div>
        }

        return(
          <div >{userReacordFeedData}
          </div>
        }
    }

The backend data is in this format:

Object
conditon
:
"something"
created_on_date_time
:
"6/23/2017 5:33:57 AM"
name
:
"Nitesh"
notes
:
"Lorem Ipsum is simply dummy text of the printing and typesetting industry  Lorem Ipsum has been the industry  standard dummy text ever since the 1500"
record_exist
:
"no"

Answer 1

This is an example which should help you out or give you an idea, at least.

class App extends React.Component {

  constructor() {
    super();
    this.state = { countries: null };
  }

  componentDidMount() {
    fetch('https://restcountries.eu/rest/v2/name/united', {
        method: 'GET',
    })
    .then(results => results.json())
    .then(data => this.setState({ countries: data }))
    .catch(function(error) {console.log(error)});
  }

  _renderCountries(country, index) {
    return <li key={index}>{country.name} - {country.subregion}</li>
  }

    render() {
    const { countries } = this.state;

    return (
        <div>
        <h1>LIST OF COUNTRIES:</h1>
          <ul>
            {
            countries ?
            countries.map(this._renderCountries)
            :
            "no data to display"
          }
          </ul>
        </div>
    );
  }
}

I used fetch in this example. try the fiddle here