React doesn't rendering list [duplicate]

Question

 <List style={{ backgroundColor: '#fff' }} dataArray={this.state.basket}
          renderRow={(item) =>
            <ListItem>
              <Body >
                <Grid>
                  <Col>
                    <Thumbnail source={{ uri: 'https://via.placeholder.com/30' }} />
                  </Col>
                  <Col>
                    <Text>{item.item.name}</Text>
                    <Text note>{item.item.price} $</Text>
                  </Col>
                  <Col>
                    <Text>{item.size} size</Text>
                    <Text>{item.price} $</Text>
                  </Col>
                </Grid>
              </Body>
            </ListItem>              
          }>
        </List>

Here i got list and the values coming from state.basket when i console.log the state in render function the output is : {"5e822cc0daa03047c8ca7ff0": {"item": {"__v": 0, "_id": "5e822cc0daa03047c8ca7ff0", "name": "coke", "price": 5, "quantity": 50}, "price": 15, "size": "3"} which is correct output and i want to render each item's name and price to the list but this not working, i tried to do with flatlist and mapping the object also it didn't work or i did something wrong. And this is the output of this.state :

{"basket": {"5e822cc0daa03047c8ca7ff0": {"item": [Object], "price": 15, "size": "3"}, "5e839d3b268ce30ef066cb84": {"item": [Object], "price": 50, "size": "2"}}, "isEmpty": false, "loading": false}

I think the problem is that the item is an object but when i googled it i couldn't find any useful thing. Thanks for the answers.

the basket is an object while dataArray should accept an array I guess, right? — Tasos
– Tasos, Commented May 15, 2020 at 10:48
It's hard to tell without knowing what the exact UI library is that you're using and what the expected prop for dataArray is supposed to be. You're passing an object but perhaps what you need is an array. — goto
– goto, Commented May 15, 2020 at 10:51
@wentjun almost the same ,Tasos Bu explained below and it worked for me. — Deniz Firat
– Deniz Firat, Commented May 15, 2020 at 11:03

Tasos · Accepted Answer · 2020-05-15 10:51:55Z

Since basket is an object you can still keep it as it is and use the object.keys() method to itterate through it:

 <List style={{ backgroundColor: '#fff' }} dataArray={Object.keys(this.state.basket)}
      renderRow={(key) =>
        <ListItem>
          <Body >
            <Grid>
              <Col>
                <Thumbnail source={{ uri: 'https://via.placeholder.com/30' }} />
              </Col>
              <Col>
                <Text>{this.state.basket[key].item.name}</Text>
                <Text note>{this.state.basket[key].item.price} $</Text>
              </Col>
              <Col>
                <Text>{this.state.basket[key].size} size</Text>
                <Text>{this.state.basket[key].price} $</Text>
              </Col>
            </Grid>
          </Body>
        </ListItem>              
      }>
    </List>

Collectives™ on Stack Overflow

React doesn't rendering list [duplicate]

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related