Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Accordion throws errors.

See original GitHub issue

import React, { Component } from "react";
import { Container, Header, Content, Accordion } from "native-base";

const dataArray = [
    { title: "First Element", content: "Lorem ipsum dolor sit amet" },
    { title: "Second Element", content: "Lorem ipsum dolor sit amet" },
    { title: "Third Element", content: "Lorem ipsum dolor sit amet" }
];
export default class AccordionExample extends Component {
    render() {
        return (
            <Container>
                <Header />
                <Content padder>
                   <Accordion dataArray={dataArray} expanded={0}/>
                </Content>
            </Container>
        );
    }
}

this is the code that i m running…i have copied this code from https://docs.nativebase.io/Components.html#accordion-def-headref… when i ran this code it throws following error. capture

Issue Analytics

State:
Created 5 years ago
Reactions:1
Comments:14 (7 by maintainers)

Top GitHub Comments

5reactions

akhil-gacommented, Jun 25, 2018

@nainishmodi

Sample code

import React, { Component } from "react";
import { Container, Header, Content, Accordion, Card, CardItem, Body, Text } from "native-base";
const dataArray = [
  { title: 1, content: ["Item one", "Item two", "Item three", "Item four"] },
  { title: 2, content: ["Item five", "Item six", "Item seven", "Item eight"] },
  { title: 3, content: ["Item nine", "Item ten", "Item eleven", "Item twelve"] }
];
export default class AccordionExample extends Component {
  render() {
    return (
      <Container>
        <Header />
        <Content padder>
          <Accordion dataArray={dataArray} renderHeader={(title) => <Card>
            <CardItem style={{ backgroundColor: "green" }}>
              <Body>
                <Text>
                  {title}
                </Text>
              </Body>
            </CardItem>
          </Card>}
            renderContent={(content) => {
              let cards = content.map((item, index) => {
                return <Card key={index}>
                  <CardItem style={{ backgroundColor: "lightgreen" }}>
                    <Body>
                      <Text>
                        {item}
                      </Text>
                    </Body>
                  </CardItem>
                </Card>
              })
              return cards
            }} />
        </Content>
      </Container>
    );
  }
}

2reactions

SupriyaKalghatgicommented, Jun 25, 2018