React-native insert a value from render array to new array

Question

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

Solution 1

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

Solution 2

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