How to export an API response in React to another component

I am trying to export an API response to another component so I can feed it with the data from that response but every export is failing. exporting the response inside the function like this: export const {hotels}returns Parsing error: ‘import’ and ‘export’ may only appear at the top level, exporting at the bottom of the file like that: export {hotels} return hotels undefined. I cannot pass it as props to the component I want as this component is not in the render function. what shall I do?? Thank you.

<>
import React from ‘react’
import DatePicker from ‘…/DatePicker/DatePicker’
import Sign from ‘js-sha256’
import InputGroup from ‘react-bootstrap/InputGroup’
import SearchField from ‘…/SearchField/SearchField’
import OccSelector from ‘…/OccSelector/OccSelector’
import OccSelector2 from ‘…/OccSelector2/OccSelector2’
import DatePicker2 from ‘…/DatePicker2/DatePicker2’

class SearchBar extends React.Component {
constructor (props) {
super(props)

this.state = {
  stay: {
    checkIn: '2020-06-15',
    checkOut: '2020-06-16'
  },
  occupancies: [
    {
      rooms: 1,
      adults: 1,
      children: 0,
      paxes: [{
        type: 'CH',
        age: 2
      }]
    }
  ],
  destination: {
    code: 'MCO'
  }
}

this.handleLocationChange = this.handleLocationChange.bind(this)
this.handleOccChange = this.handleOccChange.bind(this)
this.handleOccChange2 = this.handleOccChange2.bind(this)
this.handleDateChange1 = this.handleDateChange1.bind(this)
this.handleDateChange2 = this.handleDateChange2.bind(this)
this.handleClickButton = this.handleClickButton.bind(this)

}

handleClickButton= () => {
  const apikey = 
  const sec = 
  const D = new Date()

  const getSignature = () => {
    return Sign(apikey + sec + Math.round(D.getTime() / 1000))
  }

  const createRequestBody = () => {
    const { occupancies, destination, stay } = this.state
    return {
      stay,
      occupancies,
      destination
    }
  }

  console.log(getSignature())
  console.log(JSON.stringify(createRequestBody()))
  fetch('https://cors-anywhere.herokuapp.com/',
    {
      method: 'POST',
      headers: {
        'Api-key': apikey,
        'X-Signature': getSignature(),
        Accept: 'application/json',
        'Content-Type': 'application/json',
        'Accept-Encoding': 'gzip'
      },

      body: JSON.stringify(createRequestBody())
    }).then(res => res.json()).then(Response => {
    console.log(Response)
    const { hotels } = Response
    console.log(hotels)
  })
}

handleOccChange (occ) {
  const { rooms, adults, children } = occ
  this.setState({ occupancies: [{ rooms, adults, children }] })
}

handleOccChange2 (occ2) {
  const { rooms, adults, children } = occ2
  this.setState({ occupancies: [{ rooms, adults, children }] })
}

handleLocationChange (code) {
  const { destination } = this.state
  this.setState({ destination: { ...destination, code } })
}

handleDateChange1 (NewDate1) {
  const { stay } = this.state
  this.setState({ stay: { ...stay, checkIn: NewDate1 } })
}

handleDateChange2 (NewDate2) {
  const { stay } = this.state
  this.setState({ stay: { ...stay, checkOut: NewDate2 } })
}

render () {
  return (
    <>
      <div className='SearchBar-fields'>

        <SearchField onChange={this.handleLocationChange} />
        <DatePicker onChange={this.handleDateChange1} />
        <DatePicker2 onChange={this.handleDateChange2} />
        <OccSelector onChange={this.handleOccChange} />
        <OccSelector2 onChange={this.handleOccChange2} />
      </div>
      <div className='SearchBar-submit'>
        <button onClick={this.handleClickButton}>Search</button>
        <button>Inspire me</button>
      </div>
    </>
  )
}

}

export default SearchBar

</>

When we make a call to an API and the response comes back, it’s common to store the response (or some part of the response) in State. You can then pass that State value to another component.

Here’s a quick example from the Ravenous project:

import React, { Component } from 'react';
import './App.css';
import BusinessList from './components/BusinessList/BusinessList';
import SearchBar from './components/SearchBar/SearchBar';
import Yelp from './util/Yelp';

class App extends Component {

    state = {
      businesses: []
    };


  searchYelp = (term, location, sortBy) => {
    Yelp.search(term, location, sortBy).then(businesses => {
      this.setState({
        businesses: businesses,
      });
    });
  }

  render() {
    return (
      <div className="App">
          <h1>Ravenous</h1>
          <SearchBar searchYelp={this.searchYelp}/>
          <BusinessList businesses={this.state.businesses}/>
      </div>
    );
  }
}

export default App;

You can see the method searchYelp helps to bring in some business data and then state is set to an array of businesses. That array of businesses is passed to the BusinessList component.