How to render recursive component in React?

Question

I'm trying to render a component recursively. On each recursive call I subtract 10 px from the dimensions. I expect a series of nested divs, each one 10px smaller. When the height and width reach 10px, the component should return null, so that is my base case.

Instead of expected result, I've got nothing. No errors in the terminal, no errors in the dev tools, just a page that is frozen.

Any thoughts?

`RecurentDiv.js`:

const RecurentDiv = ({ width, height }) => {
  const style = {
    width: `${width - 10}px`,
    height: `${height - 10}px`,
    border: "1px solid black",
    display: "inline-block"
  };

  if (width < 10) return null; //base case

  return (
      <div style={style}>
        <RecurentDiv width={style.width} height={style.height} />
      </div>
  );
};

export default RecurentDiv;

`App.js`:

<RecurentDiv width={100} height={100} />

@SvetoslavDimitrov There isn't any "for loop code" because it's a recursive function. — Brandon Dyer
– Brandon Dyer, Commented Feb 18, 2020 at 20:34

ggorlen · Accepted Answer · 2022-10-14 15:37:07Z

The issue is here:

<RecurentDiv width={style.width} height={style.height} />
                  //^^^^^^               ^^^^^^

style.width is a string, not a number: ${width - 10}px. The code is doing "100px" - 10 which evaluates to NaN, which is then passed into the next RecurentDiv's props. The base case is never reached.

Instead, pass width and height numbers directly into the recursive component, subtracting the reduction amount to approach the base case.

Here's a minimal, complete example:

const RecurrentDiv = ({width, height}) => {
  const style = {
    width: `${width}px`,
    height: `${height}px`,
    border: "1px solid black",
    display: "inline-block"
  };

  return width < 10 ? null : (
    <div style={style}>
      <RecurrentDiv width={width - 10} height={height - 10} />
    </div>
  );
};

ReactDOM.createRoot(document.querySelector("#app"))
  .render(<RecurrentDiv width={100} height={100} />);

<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<div id="app"></div>

Collectives™ on Stack Overflow

How to render recursive component in React?

`RecurentDiv.js`:

`App.js`:

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

RecurentDiv.js:

App.js:

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related

`RecurentDiv.js`:

`App.js`: