How to properly render fetched api results within an accordion in react native?

Question

Hello in my project I'm using accordion of native-base.What I'm trying to do is displaying the fetched result from server within accordion. But unfortunately I'm not able to achieve that.Because within the rendering of content and header of accordion I'm doing conditional rendering. So I'm getting nothing within accordion. Following is my code as well as the json response from server. Please help me to figure out the mistake.I really don't know what's the mistake.Please guide.

json

 [{
    data: {
      course: {
        name: "I. India Economy CourseWare",
        categories: [{
          id: 299,
          name: "Indian Economy Courseware",
        }],
        instructor: {
          id: "1",
          name: "Main Admin",
          sub: ""
        },
        menu_order: 0
      },
      description: "",
      curriculum: [{
          key: 0,
          id: 0,
          type: "section",
          title: "A1. India's Economic Development",

        },
        {
          key: 1,
          id: "2821",
          type: "unit",
          title: "1. India as a Developing Economy",
          duration: 0,
          meta: []
        },
        {
          key: 2,
          id: "2864",
          type: "unit",
          title: "2. Understanding India’s economic transition",
          duration: 0,
          meta: []
        }
      ]
    ]
  }

What I'm trying to show is within accordion I want to display curriculum title with type=section as accordion headerContent and also corresponding title of type=unit within accordion content. Following is my code. What I'm getting is this [![enter image description here][1]][1] https://i.stack.imgur.com/4wqgZ.png

code*

componentWillMount() {

  fetch('xxxxxxxx' + this.props.navigation.state.params.id)
    .then((response) => response.json())
    .then((responseData) =>
      this.setState({
        details: responseData
      })
    );
}


render() {
    return ( <
        Container style = {
          styles.container
        } >
        <
        Header
        .. <
        /Header>

        <
        Card style = {
          {
            margin: 10,
            backgroundColor: '#f77a6c'
          }
        } >
        ...
        ...
        .....
        ......
        <
        /Card>

        <
        View style = {
          {
            padding: 10
          }
        } >

        {
          this.state.details.map(detail =>
            <
            ScrollView >

            {
              detail.data.curriculum.map(curr =>


                <
                Accordion dataArray = {
                  curr
                }
                animation = {
                  true
                }
                expanded = {
                  true
                }
                renderHeader = {
                  curr.type === "section" ? ( <
                    Card >
                    <
                    CardItem style = {
                      {
                        backgroundColor: "green"
                      }
                    } >
                    <
                    Body >
                    <
                    Text >
                    {curr.title}<
                    /Text> <
                    /Body> <
                    /CardItem> <
                    /Card>
                  ) : ( < Text > Header < /Text>)}
                    renderContent = {
                      curr.type === "unit" ? (

                        <
                        Card >
                        <
                        CardItem style = {
                          {
                            backgroundColor: "lightgreen"
                          }
                        } >
                        <
                        Body >
                        <
                        Text >
                        {curr.title}<
                        /Text> <
                        /Body> <
                        /CardItem> <
                        /Card>
                      ) : ( < Text > Content < /Text>)} /
                        >

                      )
                    } <
                    /ScrollView>


                  )
                }

                <
                /View> <
                /Container>
              );
            }
          }