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

have you checked ticketId have value or not in ticketTemp method? — Jigar Shah
– Jigar Shah, Commented Sep 21, 2017 at 5:23

Zachary Lordford · Accepted Answer · 2017-09-21 13:52:52Z

3

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

edited Sep 21, 2017 at 13:52

Zachary Lordford

1463 gold badges5 silver badges17 bronze badges

answered Sep 21, 2017 at 5:37

Vahid Boreiri

3,4561 gold badge21 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Jigar Shah Over a year ago

Add explanation about passing parameter in order to use

Zachary Lordford Over a year ago

@VahidBoreiri i'm getting new error in the ticketTemp function the one that you put outside of render having problem saying it ticketId is not defined

Vahid Boreiri Over a year ago

I fixed my answer.

csath · Accepted Answer · 2020-11-05 16:31:55Z

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

i get now.. thanks,... then i can make the ticketTemp as a function outside of render

Collectives™ on Stack Overflow

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

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related