Using nested rendering in React

Question

In my return, I call a function called renderRuns as follows.

return (
    <div>
        {renderRuns()}
    </div>
)

My renderRuns() looks like

const renderRuns = (type) => {
    const renderNested = (run) => {
        return (
            [1,2,3].map((item, idx) => {
                return <div>{run + item}</div>
            })

        )
    }

    [1,2,3].map((run, idx) => {
          renderNested(run)
    })
}

Basically trying to render a nested component, but not getting any output without an error.

Any thoughts?

return [1,2,3].map((... ? And one inside - return renderNested(run) — kind user
– kind user, Commented Apr 27, 2020 at 20:42
@GokuAfrica not getting any error, but it just doesn't render anything — Dawn17
– Dawn17, Commented Apr 27, 2020 at 20:45

kind user · Accepted Answer · 2020-04-27 20:51:59Z

4

Your renderRuns function does not return anything, that's why nothing appears. Simply add a return keyword.

const renderRuns = (type) => {
    const renderNested = (run) => {
        return (
            [1,2,3].map((item, idx) => {
                return <div>{run + item}</div>
            })

        )
    }

    return [1,2,3].map((run, idx) => renderNested(run));
}

answered Apr 27, 2020 at 20:51

kind user

42k8 gold badges69 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Józef Podlecki · Accepted Answer · 2020-04-27 20:48:37Z

0

Does it have to follow the same pattern as you specified?

What do you think of this solution?

const renderRuns = (type) => {
  return (
   [1,2,3].map((item, idx) => {
     return <div>{run + item}</div>
   })
}

answered Apr 27, 2020 at 20:48

Józef Podlecki

11.4k5 gold badges33 silver badges55 bronze badges

1 Comment

Dawn17 Over a year ago

I actually modified my code in my question to simplify my question. I just wanted to render items in a nested way.

user3366943 · Accepted Answer · 2020-04-27 21:18:15Z

you're pretty close, try this

import React from "react";
import "./styles.css";

export default function App() {
  const renderRuns = type => {
    const renderNested = run => {
      return [1, 2, 3].map((item, idx) => {
        return <div>{run + item}</div>;
      });
    };
    // return each call to renderedNested
    return [1, 2, 3].map((run, idx) => renderNested(run));
  };
  return <div>{renderRuns()}</div>;
}

the above works but it may be more useful to return a component instead of calling a function like this:

import React from "react";
import "./styles.css";

export default function App() {
  // receive props around from outterComponent
  const InnerComponent = ({ run }) => {
    return [1, 2, 3].map(item => <div>{run + item}</div>);
  };


  const OutterComponent = props => {
    // have can pass props around
    return [1, 2, 3].map(run => <InnerComponent {...{ run, ...props }} />);
  };

  return (
    <div>
      {/* easily pass props and stay with a known rendering pattern */}
      <OutterComponent />
    </div>
  );
}

Collectives™ on Stack Overflow

Using nested rendering in React

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related