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 hereexport default class floor extends Component<any, any> {handleslot: anyconstructor(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> ) }}