How to Access This.props.route.params in constructor

my first page pushing an array with some data to next page ,I want to use that data in RenderItem for flatlist.I tried bind event but its also not worked for me ,any help would be appriciated .

enter code here
export default class mainPage extends React.Component<any, 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,
        })
      },
    )
  }
  // componentDidMount() {

  //   this.setState({ parkingLot: [...this.parkingLot] })

  // }
  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) {
    }

    // this.setState({
    //   parkingLot: [
    //     ...this.state.parkingLot,
    //     { carnumber: this.state.vehicleNumber },
    //   ],
    // })
  }
  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>
        )}
        {/* {this.state.screen === 'screen2' && (
          <>
            <Text onPress={() => this.setState({ screen: 'screen1' })}>
              Back
            </Text>
            <FlatList
              data={this.state.slots}
              renderItem={({ item }) => this.renderItem(item)}
              keyExtractor={(item) => item.id}
            />
          </>
        )} */}
        {/* {this.state.screen === 'screen3' && (
          <>
            <Text onPress={() => this.setState({ screen: 'screen2' })}>
              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>

            {this.state.slots
              ?.filter((i: any) => i.id === this.state.selectedSlot)
              ?.map((item: any, index: number) => {
                return (
                  <View key={index}>
                    <FlatList
                      data={item.data}
                      renderItem={({ item }) => this.renderItem1(item)}
                      keyExtractor={(item, index) => index.toString()}
                    />
                  </View>
                )
              })}
          </>
        )} */}
      </View>
    )
  }
}

Here is my floor.tsx page(next page)

enter code here export default class floor extends Component<any, any> { handleslot: any constructor(props: any) { super(props) // console.log('SLOTDATA::--', props.route.params)

    this.state = {
      text: '',
      slots: [],
      screen: 'screen1',

      selectedSlot: '',
    }
    // let slo: Array<any> = this.props.route.params
    // console.log('propdata-->', slo)
    // this.setState({
    //   slo: [],
    // })
  }

  renderItem=(item: any)=> {
    console.log('item', item)

    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>
    )
  }
  render() {
    return (
      <View>
        <Text onPress={() => this.props.navigation.goBack()}>Back</Text>

        <FlatList
          data={this.props.route.params}
          renderItem={({ item }) => 
          this.renderItem(item)}
          keyExtractor={(item) => item.id}
        />
      </View>
    )
  }
}

1 answer

  • answered 2022-01-13 10:00 Akshay Shenoy

    Your issue is you are not selecting the proper data to pass in the flatlist. this.props.route.params.slots will give you the slots you are passing from previous screen. Try this

      <FlatList
              data={this.props.route.params.slots}
              renderItem={({ item }) => 
              this.renderItem(item)}
              keyExtractor={(item) => item.id}
            />
    

How many English words
do you know?
Test your English vocabulary size, and measure
how many words do you know
Online Test
Powered by Examplum