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