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 bee [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: [] };
ponentWillMount() {
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>
);
}
}
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 bee [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: [] };
ponentWillMount() {
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>
);
}
}
-
have you checked
ticketIdhave value or not inticketTempmethod? – Jigar Shah Commented Sep 21, 2017 at 5:23 - @JigarShah yes i have check it has a value in it – Zachary Lordford Commented Sep 21, 2017 at 7:52
2 Answers
Reset to default 3You 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: [] };
ponentWillMount() {
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: [] };
ponentWillMount() {
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>
);
}
}