I am having issue with mapping the data in react native

Question

I am a new developer and I am trying to display the data in my page and here I am getting the data when I console in ComponentDidMount but I dont get the data when I map it in the Jsx block. The mapped part is just showing a blank screen. Any help is appreciated.

Here I am able to get data output when I console in componentDidMount :-

    constructor() {
    super();
     this.state = {
                 ordId: "",
                 orderId:"",
                 orderDetails:{},
                 loading: false
         };
        } 

    componentDidMount() {
             this.setState({
                  loading: true
                     });

         if(this.props.navigation.getParam("orderId", {})){
           client.retreiveLastOrder(this.props.navigation.getParam("orderId", {})).then((data) => {
           this.setState({
             orderDetails: data
           });

         console.log('////////////////////////', data.line_items.length)
         console.log(this.state.orderDetails.line_items[0].grams)

        })}
         this.setState({
                  loading: false
            });
         }

I dont get any data when I map same data in my jsx:-

       {this.state.orderDetails.length > 0
        ? this.state.orderDetails.map((item, index) => {
          return (
            <Row
              key={index}
              style={{
                borderBottomColor: Colors.buttonGreen,
                paddingTop: 15
              }}
            >
              <Col style={{ flex: 1, alignItems: "flex-end" }}>
                <Text style={styles.TextProduct}>{item.quantity}X</Text>
              </Col>

              <Col
                style={{
                  flex: 4,
                  paddingLeft: 15,
                  alignItems: "flex-start"
                }}
              >
                <TouchableOpacity>
                  <View>
                    <Text style={styles.TextProduct}>{item.name}</Text>
                  </View>
                </TouchableOpacity>
              </Col>

              <Col style={{ flex: 2, alignItems: "flex-end" }}>
                <Text style={styles.TextProduct}>₹{item.price}</Text>
              </Col>
            </Row>
          );
        })
        : null}

Here is the full code of my page:-

   export default class HelpPage extends Component {
    constructor() {
    super();
    this.state = {
          ordId: "",
          orderId:"",
          orderDetails:{}, 
          loading: false
    };
   } 

  componentDidMount() {
     this.setState({
     loading: true
   });

 if(this.props.navigation.getParam("orderId", {})){
    client.retreiveLastOrder(this.props.navigation.getParam("orderId", {})).then((data) => {
     this.setState({
      orderDetails: data
      });

    console.log('////////////////////////', data.line_items.length)
    console.log(this.state.orderDetails.line_items[0].grams)

    })}
   this.setState({
     loading: false
   });
  }


  render() { 
     const { navigation } = this.props;    
    return ( 
     <Container>
       <Content padder>
         <View
           style={{ justifyContent: "space-between", flexDirection: "row" }}
            >
            <View
             style={{
            flex: 1, 
           }}
          >
          <Text style={styles.TextStyle2}>
            Order #{this.state.orderDetails.order_number}{" "}
             {/* {orderId} */}
          </Text>
           <Text>
            <Text style={styles.TextStyle2}>
              {this.state.orderDetails.presentment_currency} {this.state.orderDetails.total_price}{" "}
            </Text>
            {/* ({order.fulfillments[0].line_items.length} items) */}
          </Text>
          <Text style={styles.TextStyle4}> {this.state.orderDetails.processed_at} </Text>
          <Text style={styles.TextProduct}> {this.state.orderDetails.gateway} </Text>

          {/* <Text style={styles.TextProduct}> {order.line_items.title} </Text> */}
        </View>
        <View 
          style={{
            flex: 1,
            flexDirection: "column",
            paddingLeft: 20,
            paddingTop: 20
          }}
        >
          <Button style={styles.buttonstyle} bordered success>
            <TouchableOpacity onPress={() => this.props.navigation.navigate('HelpPage')} style={styles.TextStyle}>
            <Text>Help</Text>
             </TouchableOpacity>
          </Button>
        </View>
      </View>

      {this.state.orderDetails.length > 0
        ? this.state.orderDetails.map((item, index) => {
          return (
            <Row
              key={index}
              style={{
                borderBottomColor: Colors.buttonGreen,
                paddingTop: 15
              }}
            >
              <Col style={{ flex: 1, alignItems: "flex-end" }}>
                <Text style={styles.TextProduct}>{item.quantity}X</Text>
              </Col>

              <Col
                style={{
                  flex: 4,
                  paddingLeft: 15,
                  alignItems: "flex-start"
                }}
              >
                <TouchableOpacity>
                  <View>
                    <Text style={styles.TextProduct}>{item.name}</Text>
                  </View>
                </TouchableOpacity>
              </Col>

              <Col style={{ flex: 2, alignItems: "flex-end" }}>
                <Text style={styles.TextProduct}>₹{item.price}</Text>
              </Col>
            </Row>
          );
        })
        : null}

      <Divider style={{ backgroundColor: "grey", marginTop: 20 }} />
      <Row style={{ flex: 1, height: 45 }}>
        <Col style={{ paddingTop: 10, paddingLeft: 10 }}>
          <Text style={styles.BillText}>BILL DETAILS</Text>
        </Col>
      </Row>

      <Row style={{ borderBottomColor: Colors.buttonGreen }}>
        <Col style={{ flex: 1, alignItems: "flex-end" }} />

        <Col
          style={{ flex: 4, alignItems: "flex-start", paddingBottom: 10 }}
        >
          <TouchableOpacity>
            <View>
              <Text style={styles.TextProduct1}>Total Items</Text>
            </View>
          </TouchableOpacity>
        </Col>

        <Col
          style={{ flex: 1, alignItems: "flex-end", paddingBottom: 10 }}
        >
          <Text style={styles.GreenPriceText}>₹{this.state.orderDetails.name}</Text>
        </Col> 
      </Row>

      <Row style={{ borderBottomColor: Colors.buttonGreen }}>
        <Col style={{ flex: 1, alignItems: "flex-end" }} />

        <Col
          style={{ flex: 4, alignItems: "flex-start", paddingBottom: 10 }}
        >
          <TouchableOpacity>
            <View>
              <Text style={styles.TextProduct1}>Tax</Text>
            </View>
          </TouchableOpacity>
        </Col>

        <Col
          style={{ flex: 1, alignItems: "flex-end", paddingBottom: 10 }}
        >
          <Text style={styles.GreenPriceText}>₹{this.state.orderDetails.total_tax}</Text>
        </Col> 
      </Row>

      {/* <Row style={{ borderBottomColor: Colors.buttonGreen }}>
        <Col
          style={{ flex: 1, alignItems: "flex-end", paddingBottom: 5 }}
        />

        <Col
          style={{ flex: 5, alignItems: "flex-start", paddingBottom: 10 }}
        >
          <TouchableOpacity>
            <View>
              <Text style={styles.TextProduct1}>GST Taxes</Text>
            </View>
          </TouchableOpacity>
        </Col>

        <Col
          style={{ flex: 1, alignItems: "flex-start", paddingBottom: 10 }}
        >
          <Text style={styles.GreenPriceText}>₹26.43</Text>
        </Col>
      </Row> */}

      <Divider style={{ backgroundColor: "grey", marginTop: 20 }} />

      <Row
        style={{ borderBottomColor: Colors.buttonGreen, paddingTop: 15 }}
      >
        <Col style={{ flex: 4, alignItems: "flex-end" }}>
          <Text style={{ color: Colors.buttonGreen, fontWeight: "500" }}>
            Paid Via Gateway
          </Text>
        </Col>

        <Col
          style={{
            flex: 4,
            paddingRight: 5,
            paddingBottom: 5,
            alignItems: "center"
          }}
        >
          <TouchableOpacity>
            <View>
              <Text style={styles.BillText}>TOTAL</Text>
            </View>
          </TouchableOpacity>
        </Col>

        <Col style={{ flex: 2, alignItems: "center" }}>
          <Text
            style={{
              color: Colors.buttonGreen,
              fontSize: 18,
              fontWeight: "500"
            }}
          >
            ₹{this.state.orderDetails.total_price}
          </Text>
        </Col>
      </Row>

      <Row
        size={30}
        style={{
          alignItems: "center",
          height: 60,
          justifyContent: "center",
          paddingTop: 10
        }}
      >
        <Button
          style={{
            textAlign: "center",
            borderRadius: 10,
            justifyContent: "center",
            backgroundColor: Colors.buttonGreen,
            flexBasis: "85%",
            alignItems: "center",
            height: 40
          }}
        >
          <Text
            style={{
              textAlign: "center",
              color: "#ffffff",
              fontWeight: "bold"
            }}
          >
            {" "}
            Re Order{" "}
          </Text>
        </Button>
      </Row>

      {/* <Row style={styles.padding}>
        <Col
          style={{ flex: 4, paddingLeft: 30, justifyContent: "flex-start" }}
        >
          <View>
            <Text style={styles.feedbackTitle}>
              Give Your Valuable feedback
            </Text>
            <Text style={styles.TextStyle5}>
              How likely are you to recommend  
            </Text>
          </View>
        </Col>



        </Col>
      </Row> */}
    </Content>
  </Container>
);

}

Here is the picture of Json data I am fetching.

Answer 1

At your console output you're using data.line_items which seems to be an array and you assign the whole data object to the orderDetails not just line_items . You either assign just data.line_items to orderDetails or map orderDetails.line_items to your JSX:

if(this.props.navigation.getParam("orderId", {})) {
  client.retreiveLastOrder(this.props.navigation.getParam("orderId", {}))
    .then((data) => {
      this.setState({
        orderDetails: data.line_items // Set orderDetails to the data.line_items array
      });

      console.log('////////////////////////', data.line_items.length)
      console.log(this.state.orderDetails.line_items[0].grams)

    });
}

or use data.line_items for JSX mapping:

{this.state.orderDetails.line_items.length > 0
  ? this.state.orderDetails.line_items.map((item, index) => {
  ...
  })
  : null
}