title: React recursive tree pass JSON path
body: <p>I'm currently creating a Recursive tree using React and have hit another road block. I am trying to basically pass the path from within my JSON structure. So for each child I want to pass a object prop that looks something like this...</p>
  
  <p><strong>Level 1 child (Clicked on Fruit)</strong></p>
  
  <p>{value: "Fruit"}</p>
  
  <p><strong>Level 2 child (Clicked on Tropical)</strong></p>
  
  <p>{value: "Fruit", nested_values: [{ value: 'Tropical'}] }</p>
  
  <p><strong>Level 3 child (Clicked on Pineapple)</strong></p>
  
  <p>{value: "Fruit", nested_values: [{ value: 'Tropical', nested_values:[{ value: 'Pineapple' }]}] }</p>
  
  <p>Etc... Recursively</p>
  
  <p>I somehow need to get to the point where you select a tree element and the full JSON structure / path for that particular element is sent to a Redux store. </p>
  
  <p>Any help would be much appreciated!</p>
  
  <p><strong>Current Code</strong></p>
  
  <pre><code>createTree(data, isSub, lev) {
      let level = lev || 0;
      let children = [];
      for (let i in data) {
          if (typeof(data[i].nested_values) === 'object') { // Sub array found, build structure
              children.push(
                  &lt;div class={"filter-group level-" + (level)}&gt;
                      &lt;div class="filter-heading"&gt;{data[i].value}&lt;/div&gt;
                      {this.createTree(data[i].nested_values, true, level)}
                  &lt;/div&gt;
              );
          } else { // No submenu, bottom of tree
              children.push(
                  &lt;span key={i}&gt;
                      {data[i].value}               
                  &lt;/span&gt;
              );
          }
      }
      return &lt;div className='filter-body open'&gt;{children}&lt;/div&gt;;
  }
  </code></pre>
  
  <p><strong>Dummy JSON</strong></p>
  
  <pre><code>{
          "value": "Fruit",
          "occurrence_count": 5,
          "nested_values": [{
              "value": "Berries",
              "occurrence_count": 3,
              "nested_values": [{
                  "value": "Strawberry",
                  "occurrence_count": 1
              }, {
                  "value": "Blackberry",
                  "occurrence_count": 1
              }, {
                  "value": "Raspberry",
                  "occurrence_count": 1
              }, {
                  "value": "Redcurrant",
                  "occurrence_count": 1
              }, {
                  "value": "Blackcurrant",
                  "occurrence_count": 1
              }, {
                  "value": "Gooseberry",
                  "occurrence_count": 1
              }, {
                  "value": "Cranberry",
                  "occurrence_count": 1
              }, {
                  "value": "Whitecurrant",
                  "occurrence_count": 1
              }, {
                  "value": "Loganberry",
                  "occurrence_count": 1
              }, {
                  "value": "Strawberry",
                  "occurrence_count": 1
              }]
          }, {
              "value": "Tropical",
              "occurrence_count": 2,
              "nested_values": [{
                  "value": "Pineapple",
                  "occurrence_count": 1
              }, {
                  "value": "Mango",
                  "occurrence_count": 1
              }, {
                  "value": "Guava",
                  "occurrence_count": 1
              }, {
                  "value": "Passion Fruit",
                  "occurrence_count": 1
              }, {
                  "value": "Dragon Fruit",
                  "occurrence_count": 1
              }]
          }]
  }
  </code></pre>