App.js

import React from 'react';
import { QueryRenderer } from 'react-relay';
import environment from './RelayEnvironment'
import graphql from 'babel-plugin-relay/macro';
import './tailwind.output.css';


export default class App extends React.Component {
  //this.state = {farmCropId:1}
  constructor(props) {
    super(props)
    this.state = { farmCropId: 1 }
  }
  onFarmCropIdChange = (event) => {
    console.log(event.target.value)
    this.setState({ farmCropId: event.target.value })
  }
  render() {
    const farmCropId = this.state.farmCropId
    console.log('Props', this.props)
    return (
      <div>
        <div className="max-w-md mx-auto flex p-6 bg-gray-100 mt-10 rounded-lg shadow-xl">
          <label class="block text-gray-700 text-sm font-bold mb-2" for="farmCropId">
            Farm Crop Id
      </label>
          <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" type="text" value={farmCropId} onChange={this.onFarmCropIdChange} />
        </div>
        <QueryRenderer
          environment={environment}
          query={graphql`
          query AppQuery($farmCropId: Int) {
            bookings(input: {farmCropId: $farmCropId}){
    bookings {
      bookingId
      machines{
        location
      }
    }
  } 
          }
        `}
          variables={{ farmCropId }}
          render={({ error, props }) => {
            console.log('Error', error, 'Props', props)
            if (error) {
              return <div>Error!</div>;
            }
            if (!props) {
              return <div>Loading...</div>;
            }
            return <div className="max-w-md mx-auto flex p-6 bg-gray-100 mt-10 rounded-lg shadow-xl">
              <div className="ml-6 pt-1">
                <h1 className="text-2xl text-blue-700 leading-tight">
                  Booking Information:
      </h1>
                {props.bookings.bookings.map((booking) => {
                  return (
                    <div className="max-w-md mx-auto flex p-6 bg-gray-100 mt-10 rounded-lg shadow-xl" key={`booking-${booking.bookingId}`}>
                      <label>Booking Id: {booking.bookingId}</label>
                      <br />
                      <label>Machine Location Id: {booking.machines.location}</label>
                    </div>
                  )
                })}
              </div>
            </div>;
          }}
        />
      </div>

    );
  }
}