CODEWITHSUNDEEP
javascriptreactjsreact-nativemapping
Ritesh Ahlawat
Ritesh Ahlawat

Reputation: 36

Cannot Render Nested Maps In ReactJS

I am trying to nest maps to render an array within an object

My Cards Component Render Method (Not Nested, Working):

render() {
    return (
      <div class="mediator-container">
        {this.state.routeList.map(
          (route, index) => 
            <Card busName={this.state.routeList[index].$.tag} />           

        )}
        <span class="loader">
          <span class="loader-inner"></span>
        </span>
      </div>
    );
  }

My Cards Component Render Method (Nesteing, Not Working!!):

render() {
    return (
      <div class="mediator-container">
        {this.state.routeList.map((route, index) =>
          {
            {
              this.busTitleToDirectionName(this.state.routeList[index].$.tag).map(busDir => {
                <Card busName={busDir} />;
              });
            }
          }
        )}
        <span class="loader">
          <span class="loader-inner"></span>
        </span>
      </div>
    );
  }

busTitleToDirectionName(int) returns an array of Strings

My Card Subcomponent's render method:

render() {
    // Logging to see if render method is called
    console.log("Ran");
    return (
      <div className="card">
        <div className="card-header">
          <div className="bus-name">
            <p>{this.props.busName}</p>
          </div>
        </div>
      </div>
    );
  }

How it looks like without nesting when it does work (Not enough reputation to post images so here are the links):

https://i.gyazo.com/66414925d60701a316b9f6325c834c12.png

I also log in the Card subcomponent so that we know that the Card component was ran and it logs that it did get called without nesting

https://i.gyazo.com/fb136e555bb3df7497fe9894273bf4d3.png

When nesting, nothing renders and the Card subcomponent isn't being called as there is no logging of it

https://i.gyazo.com/38df248525863b1cf5077d4064b0a15c.png

https://i.gyazo.com/d6bb4fb413dfc9f683b44c88cce04b8a.png

Upvotes: 0

Views: 2550

Answers (2)

Ritesh Ahlawat
Ritesh Ahlawat

Reputation: 36

Thanks, Prahbat Kumar, but I figured out the issue. I had to return the subcomponent from the nested map here is the code:

render() {
    return (
      <div class="mediator-container">
        {this.state.routeList.map((route, index) =>
            this.busTitleToDirectionName(this.state.routeList[index].$.tag).map(busDir => {
              return <Card busName={busDir} />
            })
        )}

        <span class="loader">
          <span class="loader-inner"></span>
        </span>
      </div>

    );
  }

Upvotes: 1

Prabhat Kumar
Prabhat Kumar

Reputation: 530

You can try below code in your nested case. In the nesting of map you have to wrap your nested map within a container. Here I use React.Fragment (<> ) as a container.

return (
  <div class="mediator-container">
    {this.state.routeList.map((route, index) =>
      <>
        {
          this.busTitleToDirectionName(this.state.routeList[index].$.tag).map(busDir => {
            <Card busName={busDir} />;
          });
        }
      </>
    )}
    <span class="loader">
      <span class="loader-inner"></span>
    </span>
  </div>
);

Hope it will help you!!

Upvotes: 1

Related Questions