React Recursion

Question

Im trying to let a function call itself to do some recursion. But I cant seem to find out how to access the function from within itself. Probably a syntax problem - can anyone help?. It throws TypeError: Cannot read property 'recursiveRenderChildren' of undefined

import React, { Component } from 'react';

export default class ComposeDom extends Component {

    render() {
        return <div>
            {this.recursiveRenderChildren(this.props.cdom.treeData)}
        </div>
    }
    recursiveRenderChildren(children) {
        return children.map(function(child){
            console.log(child);
            return <child.slug key={child.title}>{child.title} {this.recursiveRenderChildren(child.children)}</child.slug>
        })
}

In general there should be no issue "accessing the function from within itself". So what is the error you're seeing? — Oliver Charlesworth, Jun 05 '17 at 17:46
Oh hi. Your quick. It does throw an error "TypeError: Cannot read property 'recursiveCloneChildren' of undefined" — Phil, Jun 05 '17 at 17:48
recursiveCloneChildren shouldn't this be recursiveRenderChildren — VivekN, Jun 05 '17 at 17:49
i think typo: you are calling `recursiveCloneChildren` instead of `recursiveRenderChildren`, check console it should throw the error. — Mayank Shukla, Jun 05 '17 at 17:50
Typo fixed - to no avail: still TypeError: Cannot read property 'recursiveRenderChildren' of undefined — Phil, Jun 05 '17 at 17:53
binding issue, use arrow function: `return children.map((child) => {` check this answer for more details: https://stackoverflow.com/questions/43568344/typeerror-cannot-read-property-function-name-of-undefined-when-binding-onclic — Mayank Shukla, Jun 05 '17 at 17:55

score 1 · Accepted Answer · answered Jun 05 '17 at 17:55

1

The function should be like this:-

recursiveRenderChildren(children) {
        let that = this;
        return children.map(function(child){
          console.log(child);
            return <child.slug key={child.title}>{child.title} {that.recursiveRenderChildren(child.children)}</child.slug>
        })
  }

answered Jun 05 '17 at 17:55

VivekN

1,562
11
14

1

storing the context in a separate variable is not required, we can use arrow function: `return children.map((child) => {` – Mayank Shukla Jun 05 '17 at 17:58
1

@MayankShukla yes that's correct as well.Just wanted to make things easy for him to understand which is why stored context in another variable. – VivekN Jun 05 '17 at 17:59
@Phil if the answer helped you, can you please mark it as the correct answer.Thanks. – VivekN Jun 05 '17 at 18:03
@VivekN - thank your for pointing out the fundamental problem here in a simple manner :D – Phil Jun 05 '17 at 18:04
Happy to help... :) – VivekN Jun 05 '17 at 18:06
@MayankShukla. And thx for going into detail here. I had the funciton itsel as a arrow-function but I didn't think of expressing the map-call as an arrow function - another side-mystery solved. ;) – Phil Jun 05 '17 at 18:10

React Recursion

1 Answers1