allocation in array using textinput in react native

Create a Parking Management application in React Native where the application will:
~ Parking manager can create a lot: App will ask for the number of lots in the parking area, it will
then show the number of lots on the page for the parking area.
~ Each lot will be allotted a unique number.
~ App will ask for a car registration number while entering into the parking area and allot any
random parking lot to the car, If available.
~ If no lot is empty then show a toast message that Parking is full.

• On exit, parking charges should be paid by the car and the parking lot will also be marked
  empty for other cars, Calculations for parking charges are:

• First 2 hour

• $10 will be changed for every hour then after

  this is my task and i did this

  my mainpage code
  export default class mainPage extends React.Component<any, any> {
  addValues: any
  parkingLot: any
  constructor(props: any) {
  super(props)
  this.state = {
  text: ”,
  slots: [],
  screen: ‘screen1’,
  vehicleNumber: ”,
  parkingLot: [],
  selectedSlot: ”,
  }
  }

  createSlot() {
    let tempdata: any[] = []
    for (let i = 0; i < parseInt(this.state.text); i++) {
      tempdata.push({
        allocated: false,
        timestamp: new Date(),
      })
    }
    this.setState(
      {
        slots: [
          ...this.state.slots,
          {
            id: (Math.random() + 1).toString(36).substring(7),
            count: parseInt(this.state.text),
            data: tempdata,
          },
        ],
        text: '',
        screen: 'screen2',
      },
      () => {
        this.props.navigation.navigate('floor', {
          slots: this.state.slots,
        })
      },
    )
  }
  
  park = () => {
    console.log('jcjhj', this.state.parkingLot)
    var item = this.state.slots[
      Math.floor(Math.random() * this.state.slots.length)
    ]
    console.log('Parkinglot', this.state.parkingLot, item)
    console.log('Slots', this.state.slots)
    if (this.state.slots) {
    }
  }
  renderItem(item: any) {
    return (
      <TouchableOpacity
        style={styles.Slotinput}
        onPress={() =>
          this.setState({ screen: 'screen3', selectedSlot: item.id })
        }
      >
        <Text style={{ fontSize: 12, color: 'white', fontWeight: 'bold' }}>
          Slot ID:-{item.id}
        </Text>
        <Text style={{ fontSize: 12, color: 'white', fontWeight: 'bold' }}>
          Slot Count:-{item.count}
        </Text>
      </TouchableOpacity>
    )
  }
  renderItem1(item: any) {
    return (
      <View style={styles.Slotinput}>
        <Text>{item.allocated ? 'Allocated' : 'Available'}</Text>
        {this.state.parkingLot.map((e: any) => {
          return <Text>{e.carnumber}</Text>
        })}
      </View>
    )
    //   )
    // }
    // return demo
  }
  
  render() {
    return (
      <View>
        {this.state.screen === 'screen1' && (
          <View style={styles.form}>
            <TextInput
              style={styles.input}
              placeholder="Enter A value for slot"
              onChangeText={(text: any) => this.setState({ text })}
              value={this.state.text}
            />
            <TouchableOpacity
              style={
                this.state.text && this.state.text
                  ? styles.addItemButton
                  : styles.BlurItemButton
              }
              disabled={this.state.text == ''}
              onPress={() => this.createSlot()}
            >
              <Text style={styles.buttonText}>Submit</Text>
            </TouchableOpacity>
          </View>
        )}
      </View>
    )
  }
  

  }

  my 2nd page code

  export default class floor extends Component<any, any> {
  handleslot: any
  constructor(props: any) {
  super(props)

        this.state = {
          text: '',
          space: props.route.params.slots,
          screen: 'screen1',
          selectedSlot: '',
        }
      }
  
      sendArray = () => {
        let tempdata: any[] = []
        for (let i = 0; i < parseInt(this.state.text); i++) {
          tempdata.push({
            allocated: false,
            timestamp: new Date(),
          })
        }
        this.setState(
          this.props.navigation.navigate('parkingSlot', {
            space: this.props.route.params.slots,
          }),
        )
        // alert(this.state.space.length)
      }
  
      renderItem = (item: any) => {
        console.log(item.item)
  
        return (
          <TouchableOpacity style={styles.Slotinput} onPress={this.sendArray}>
            <Text style={{ fontSize: 12, color: 'white', fontWeight: 'bold' }}>
              Slot ID:-{item.item.id}
            </Text>
            <Text style={{ fontSize: 12, color: 'white', fontWeight: 'bold' }}>
              Slot Count:-{item.item.count}
            </Text>
          </TouchableOpacity>
        )
      }
  
      render() {
        return (
          <View>
            <Text onPress={() => this.props.navigation.navigate('MainPage')}>
              Back
            </Text>
  
            <FlatList
              data={this.props.route.params.slots}
              renderItem={this.renderItem}
              keyExtractor={(item) => item.id}
            />
          </View>
        )
      }
    }
  

my 3rd page

export default class parkingSlot extends Component<any, any> {
      constructor(props: any) {
        super(props)
        // console.log('parkingSlots::--', this.props.route.params.space[0].data)
    
        this.state = {
          text: '',
          parkingLots: [] = this.props.route.params.space[0].data,
          screen: 'screen1',
          selectedSlot: '',
          vehicleNumber: '',
        }
      }
      park() {
        // console.log('this.state.parkinglot', this.state.parkingLots)
    
        this.state.parkingLots?.every((vehicleNumber: any) => {
          console.log(vehicleNumber)
    
          if (vehicleNumber.isAllocated !== true) {
            vehicleNumber.isAllocated == true
            return false
          }
          return true
        })
        this.setState([...this.state.parkingLots])
      }
    
      renderItem = (item: any) => {
        console.log('Data', item)
    
        return (
          <TouchableOpacity style={styles.Slotinput}>
            <Text>{item.allocated}</Text>
          </TouchableOpacity>
        )
      }
      render() {
        return (
          <View>
            <Text onPress={() => this.props.navigation.goBack()}>Back</Text>
            <TextInput
              placeholder="Vechicle Number"
              style={styles.input}
              value={this.state.vehicleNumber}
              onChangeText={(vehicleNumber: any) =>
                this.setState({ vehicleNumber })
              }
              // onChangeText={data => this.setState({ vehicleNumber: data })}
            ></TextInput>
            <TouchableOpacity
              style={styles.addItemButton}
              onPress={() => this.park()}
            >
              <Text>Park Vechicle</Text>
            </TouchableOpacity>
    
            <FlatList
              data={this.props.route.params.space[0].data}
              renderItem={this.renderItem}
              keyExtractor={(item) => item.id}
            />
          </View>
        )
      }
    }