Как получить объекты в массиве объектов в React Native

const data = {
 "info1": {
    "label": "label",
    "class": "class-css",
    "title": "title",
    "text": "text",
    "number": "20",
    "tags": [
         {
            "name": "#twitter"
        },
        {
            "name": "#myspace"
        }
    ]
 },
 "info2": {
    "label": "label",
    "class": "class-css",
    "title": "title",
    "text": "text",
    "number": "20",
    "tags": [
         {
            "name": "#instagram"
        },
        {
            "name": "#facebook"
        }
    ]
  }
};

const tags = Object.keys(data).reduce((result, key) => {
  return result.concat(data[key].tags);
}, [])

console.info(tags);

/* tags = [
  {
    "name": "#twitter"
  },
  {
    "name": "#myspace"
  },
  {
    "name": "#instagram"
  },
  {
    "name": "#facebook"
  }
] */

class App extends React.Component {
  state = {
    labels: {
      info1: {
        label: "label1",
        class: "class-css",
        title: "title",
        text: "text",
        number: "20",
        tags: [
          {
            name: "#twitter",
          },
          {
            name: "#myspace",
          },
        ],
      },
      info2: {
        label: "label2",
        class: "class-css",
        title: "title",
        text: "text",
        number: "20",
        tags: [
          {
            name: "#instagram",
          },
          {
            name: "#facebook",
          },
        ],
      },
    },
  }

  render() {
    const { labels } = this.state;
    return (
      <div>
        {
          Object.values( labels ).map( value =>
            <Info label = {value} key = {value.label} /> )
        }
      </div>
    );
  }
}

const Info = ( props ) => {
  const { title, text, tags } = props.label;
  const tagList = tags.map( tag => <p key = {tag.name}>{tag.name}</p> );
  return (
    <div style = {{ border: "1px solid gray", marginTop: "-1px" }}>
      <p>{title}</p>
      <p>{text}</p>
      <div>{tagList}</div>
    </div>
  );
};

ReactDOM.render(
  <App />,
  document.getElementById("root")
);

<script src = "https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id = "root"></div>

const labels = {
  info1: {
    label: "label1",
    class: "class-css",
    title: "title",
    text: "text",
    number: "20",
    tags: [
      {
        name: "#twitter"
      },
      {
        name: "#myspace"
      }
    ]
  },
  info2: {
    label: "label2",
    class: "class-css",
    title: "title",
    text: "text",
    number: "20",
    tags: [
      {
        name: "#instagram"
      },
      {
        name: "#facebook"
      }
    ]
  }
};

class App extends React.Component {
  state = {
    currentLabel: Object.keys(labels)[0]
  };

  handleInfoChange = info => this.setState({ currentLabel: info });

  renderList = () => (
    <ul>
      {Object.keys(labels).map(info => (
        <Item key = {info} info = {info} onClick = {this.handleInfoChange} />
      ))}
    </ul>
  );

  render() {
    const { currentLabel } = this.state;
    return (
      <div>
        {this.renderList()}
        <Info currentLabel = {currentLabel} />
      </div>
    );
  }
}

const Item = props => {
  const { info, onClick } = props;
  const handleClick = () => onClick(info);
  return <li onClick = {handleClick}>{info}</li>;
};

const Info = props => {
  const { currentLabel } = props;
  const { title, text, tags } = labels[currentLabel];
  const tagList = tags.map(tag => <p key = {tag.name}>{tag.name}</p>);
  return (
    <div style = {{ border: "1px solid gray", marginTop: "-1px" }}>
      <p>{title}</p>
      <p>{text}</p>
      <div>{tagList}</div>
    </div>
  );
};

ReactDOM.render( <App />, document.getElementById( "root" ) );

<script src = "https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id = "root"></div>