ajax - Passing variables inside react components then to DFP -

i building component in react - inside of component first make ajax call service , take part of response (and other variables) , use inside of function advertisement through dfp. calls dfp working expected without problems - problem in ajax response , sending correct data on dfp.

i need lineitem set inside fetch , passed setpageleveltargeting()

import react 'react'; import proptypes 'prop-types'; import { gpt, applygptattributes, getmediamapping } './dfphelper';  class pubadrecs extends react.component { constructor(props) { super(props); // iu_szs in request header this.sizemapping =   this.props.sizemapping || getmediamapping(this.props.adsize || this.props.adname); this.setgptattributes(); this.state = {     mydata: [],     adrecs: false };   this.setpageleveltargeting = this.setpageleveltargeting.bind(this); this.lineitem = '123'; }  componentdidmount() { const channelff = 'firefly'; const size = 'fluidx1200x100x728x90x970x90'; const apiurl = 'https://api.mysite.com'; const adrecs = 'ad_recommendations/v1/recommendations';  fetch(`${apiurl}/${adrecs}`, {   method: 'post',   headers: {     'content-type': 'application/json'   },   body: json.stringify({     placements: [{ page_location: this.props.adname, placement_size: size }],     channel_id: '015d9e6b2e320201bec36788cb9a61d2',     channel_type: channelff,     page_type: this.props.pagetype,     search_term: '/c/55b0t',     category_id: this.props.page,     page_id: this.props.pagetype   }) }) .then( (data) =>  data.json() ) .then( (response) =>      this.setstate({         mydata: response,         adrecs: true     }), this.lineitem = 'testing' // **** value **** // this.lineitem = this.state.mydata.map( (mydata) => mydata.page_location) )}   // in case component removed stop attempting make ajax call! componentwillunmount() { // this.adrecsfetch.abort(); }  // applying gpt methods setgptattributes() {   applygptattributes();   this.setpageleveltargeting(this.props.page); }  // scp in request header getslottargetingparams() {   return {     as: `${this.props.page}${this.props.adname}`,     pos: this.props.adname   }; }  // iu in request header getadunitpath() {   const networkid = this.props.networkcode;   const adunitcode = this.props.adunitcode;   const adunitpage = this.props.pagecategory     ? `${this.props.pagetype}/${this.props.pagecategory}`     : this.props.page; return `/${networkid}/${adunitcode}/${adunitpage}`; }  // cust_param in request header  setpageleveltargeting() { const customparams = this.props.customparams || {};  const pagetarget = object.assign(   {},   {     n_cat: this.props.page,     fly: this.props.fly,     pt: this.props.pagetype,     line_item_id: this.lineitem // **** put value here ****   },   customparams ); object.keys(pagetarget).map(key => gpt.settargeting(key, pagetarget[key])); }  render() { console.log(this.lineitem);   if (!this.state.adrecs) {       return null   } return (   <div>      <h2 classname="h-sr-only" aria-hidden="true">third party advertisement</h2>     <gpt       adunitpath={this.getadunitpath()}       sizemapping={this.sizemapping}       targeting={this.getslottargetingparams()}     />     <p style={{ margin: '20px' }}>       ad recs text {this.state.mydata.map( (mydata) => mydata.page_location)}     </p>   </div> ); } }    pubadrecs.proptypes = {   adname: proptypes.string.isrequired,   adsize: proptypes.string,   networkcode: proptypes.string.isrequired,   adunitcode: proptypes.string.isrequired,   page: proptypes.string,   pagetype: proptypes.string.isrequired,   pagecategory: proptypes.string,   fly: proptypes.string.isrequired,   sizemapping: proptypes.arrayof(proptypes.object),   customparams: proptypes.object // eslint-disable-line react/forbid-prop-types };  export default pubadrecs;