Как правильно отображать извлеченные результаты API в аккордеоне в реагировать на натив?

Question

Здравствуйте, в моем проекте я использую аккордеон native-base. То, что я пытаюсь сделать, - это отображение результатов, полученных с сервера в аккордеоне.Но, к сожалению, я не могу этого добиться. Поскольку при рендеринге контента и заголовка аккордеона я делаю условный рендеринг.Так что я ничего не получаю в аккордеоне.Ниже приведен мой код, а также ответ json с сервера.Пожалуйста, помогите мне разобраться в ошибке. Я действительно не знаю, в чем ошибка. Пожалуйста, руководство.

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: []
        }
      ]
    ]
  }

Что я пытаюсьШоу в аккордеоне. Я хочу отобразить curriculum title с type=section в виде аккордеона headerContent, а также соответствующий заголовок type=unit в аккордеонном контенте.Ниже приведен мой код.Я получаю вот это [! [Введите описание изображения здесь] [1]] [1] https://i.stack.imgur.com/4wqgZ.png

код *

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