What I'm trying to do is insert a value from the old array that I have render to the new array.
For now it can render the data that I want perfectly but when I push it into new array it become [id : undefined]
How do call ticketId that I render from the ListView to save into myState array?
class SeactionSeating extends React.Component {
state = { ticket: [], myState: [] };
componentWillMount() {
const tempticket = [];
let i;
let k = 1;
let x;
for (i = 1; i <= 50; i++) {
k++;
if (i < 10) {
x = 'north';
} else if (i < 20) {
x = 'south';
} else if (i < 30) {
x = 'west';
} else if (i < 40) {
x = 'east';
}
tempticket.push({ ticketId: i, row: k, gate: x });
}
this.setState({ ticket: tempticket });
this.setState({ myState: [] });
//i deliberately leave mystate empty so that i can push new array later
}
render() {
const ticketTemp = () => {
this.state.myState.push({ id: ticketId });
console.log(this.state.myState);
};
return (
<Container>
<View style={styles.listViewTitlePanel}>
<Text> hello there</Text>
</View>
<Content>
<ScrollView>
<List>
{ this.state.ticket.map((item, i) => (
<ListItem
roundAvatar
key={i}
avatar={
<View >
<Text>{item.ticketId}</Text>
</View>
}
title={
<View>
<Text>ROW :{item.row}</Text>
</View>
}
subtitle={
<View>
<Text>GATE :{item.gate}</Text>
</View>
}
//call ticketTemp
onPress={ticketTemp}
/>
))
}
</List>
</ScrollView>
</Content>
</Container>
);
}
}
You should pass trackId
to your ticketTemp
function that it can push this value into the myState
array. I just did that. And I transferred the ticketTemp
function to the outside of render
function because a function that modify the state can not be inside of render
. Your code must be like this:
class SeactionSeating extends React.Component {
state = { ticket: [], myState: [] };
componentWillMount() {
const tempticket = [];
let i;
let k = 1;
let x;
for (i = 1; i <= 50; i++) {
k++;
if (i < 10) {
x = 'north';
} else if (i < 20) {
x = 'south';
} else if (i < 30) {
x = 'west';
} else if (i < 40) {
x = 'east';
}
tempticket.push({ ticketId: i, row: k, gate: x });
}
this.setState({ ticket: tempticket });
// this.setState({ myState: [] }); //this line must be removed
//i deliberately leave mystate empty so that i can push new array later
}
ticketTemp(ticketId) {
this.state.myState.push({ id: ticketId });
console.log(this.state.myState);
};
render() {
return (
<Container>
<View style={styles.listViewTitlePanel}>
<Text> hello there</Text>
</View>
<Content>
<ScrollView>
<List>
{ this.state.ticket.map((item, i) => (
<ListItem
roundAvatar
key={i}
avatar={
<View >
<Text>{item.ticketId}</Text>
</View>
}
title={
<View>
<Text>ROW :{item.row}</Text>
</View>
}
subtitle={
<View>
<Text>GATE :{item.gate}</Text>
</View>
}
//call ticketTemp
onPress={() => this.ticketTemp(item.ticketId)}
/>
))
}
</List>
</ScrollView>
</Content>
</Container>
);
}
}
i made some change now i run without error thank you
You can change the ticketTemp method and pass ticketID as an argument. Then change the onPress and call the ticketTemp with ticketID.
class SeactionSeating extends React.Component {
state = { ticket: [], myState: [] };
componentWillMount() {
const tempticket = [];
let i;
let k = 1;
let x;
for (i = 1; i <= 50; i++) {
k++;
if (i < 10) {
x = 'north';
} else if (i < 20) {
x = 'south';
} else if (i < 30) {
x = 'west';
} else if (i < 40) {
x = 'east';
}
tempticket.push({ ticketId: i, row: k, gate: x });
}
this.setState({ ticket: tempticket });
this.setState({ myState: [] });
//i deliberately leave mystate empty so that i can push new array later
}
render() {
const ticketTemp = (ticketId) => {
this.state.myState.push({ id: ticketId });
console.log(this.state.myState);
};
return (
<Container>
<View style={styles.listViewTitlePanel}>
<Text> hello there</Text>
</View>
<Content>
<ScrollView>
<List>
{ this.state.ticket.map((item, i) => (
<ListItem
roundAvatar
key={i}
avatar={
<View >
<Text>{item.ticketId}</Text>
</View>
}
title={
<View>
<Text>ROW :{item.row}</Text>
</View>
}
subtitle={
<View>
<Text>GATE :{item.gate}</Text>
</View>
}
//call ticketTemp
onPress={() => this.ticketTemp(item.ticketId)}
/>
))
}
</List>
</ScrollView>
</Content>
</Container>
);
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.