title: React JS tree view to display api response
body: <p>In my react application, I am implementing a tree view structure to display the api response in more readable format. I am using tree view-react-bootstrap for that.</p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import TreeView from 'treeview-react-bootstrap'
  
  class Example extends React.Component {
      constructor(){
          super();
          // SET YOUR DATA
          this.state = {
              data: [
                  {
                      text: "John Peter",
                      nodes: [
                        {
                          text: "ID: 11111",
                          nodes: [
                            {
                              text: "VIN"
                            },
                            {
                              text: "Policy Effective Date"
                            },
                            {
                              text: "Policy Expiration Date"
                            },
                            {
                              text: "Vehicle Make"
                            },
                            {
                              text: "Vehicle Model"
                            }
                          ]
                        },
                        {
                          text: "ID: 123456",
                          nodes: [
                              {
                                text: "VIN"
                              },
                              {
                                text: "Policy Effective Date"
                              },
                              {
                                text: "Policy Expiration Date"
                              },
                              {
                                text: "Vehicle Make"
                              },
                              {
                                text: "Vehicle Model"
                              }
                            ]
                        }
                      ]
                    },
                    {
                      text: "Scott Brown"
                    }
              ]
          }
  
      }
  
      render(){
          return (
              // RENDER THE COMPONENT
              &lt;TreeView data={this.state.data} /&gt;
          );
      }
  }
  
  export default Example
  </code></pre>
  
  <p>I am using dummy data for now but this is the format that I want my data to be displayed. The api response I have is "array of objects" and it is only in one level JSON format.</p>
  
  <p>Sample response -  </p>
  
  <pre><code>[
                      {
                          "id": "1234",
                          "name": "John Scott",
                          "vin": "45",
                          "make": "Toyota",
                          "model": "Etios"
                      },
                      {
                          "id": "4567",
                          "name": "James Scott",
                          "vin": "67",
                          "make": "Hyundai",
                          "model": "Etios"
                      }
  ]
  </code></pre>
  
  <p>If you see the response, I would like my key value to be printed in a tree structure.</p>
  
  <p>Is there a way I can render this response to accommodate with treeview-react-bootstrap?</p>
  
  <p>I am not sure if I need to use map function inside my render method to iterate and display the data and how will it work along.Can someone let me know if I am doing it right or is there any better way of doing it. thanks in advance.</p>