Dynamic list inside dynamic list

Question

I'm using NativeBase and i have a dynamic accordion, i want to put inside the content in the dataArray a dynamic list from the NativeBase components, is that possible? here is the code:

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 AccordionIconExample extends Component {
  render() {
    return (
      <Container>
        <Header />
        <Content padder>
          <Accordion dataArray={dataArray} icon="add" expandedIcon="remove" />
        </Content>
      </Container>
    );
  }
}

you just want to put dynamic data in Accordion dataArray? – Haider Ali Sep 29 '18 at 21:50 — Haider Ali, Sep 29 '18 at 21:50

score 0 · Answer 1 · answered Oct 01 '18 at 06:57

import React, { Component } from "react";
import { StyleSheet } from "react-native";
import { Container, Header, Content, Accordion, Button,Text } 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 App extends Component {

constructor(props) {
 super(props);

 this.state = {
  acc : dataArray
 }
}

addAccordian = () =>{
this.setState({
  acc: this.state.acc.concat( { title: "Forth Element", content: "asdsa asdasd asdas" })
 })
}

render() {
 return (
   <Container>
   <Button onPress={()=> this.addAccordian()}>
   <Text>Click Me!</Text>
 </Button>
    <Header />
    <Content padder>
      <Accordion dataArray={this.state.acc} icon="add" expandedIcon="remove" />
    </Content>
  </Container>
  );
 }
}

Dynamic list inside dynamic list

1 Answers1