React doesn't rendering list

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, May 15 '20 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, May 15 '20 at 10:51
@wentjun almost the same ,Tasos Bu explained below and it worked for me. — Deniz Firat, May 15 '20 at 11:03

score 1 · Accepted Answer · answered May 15 '20 at 10:51

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>

React doesn't rendering list

1 Answers1