How to dynamically populate html content using reactjs?

Question

I am trying to populate navigation bar items i.e navigation list using JSON data. I am trying to map through the data and display dropdown navigation items.

Example code of dropdown navigation:

 <nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1
        <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="#">Page 1-1</a></li>
          <li><a href="#">Page 1-2</a></li>
          <li><a href="#">Page 1-3</a></li>
        </ul>
      </li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
  </div>
</nav>

Now I am trying to create a function shownavlist() which dynamically populates the data inside navigation bar.

My code:

function shownavlist(allnavitems){

      const items = allnavitems.map( h => {
        return(
            h.links.map( display => {
              return(

                <a href="#" class="dropdown-toggle navbar-link" data-toggle="dropdown">{h.heading}<span class="caret"></span></a>
                <ul class="dropdown-menu {{getTheme slug}}" role="menu">
                  <li><a class="navbar-link notAllowed" href="">{display.heading}</a>
                  </li>
                </ul>

              )
            })  
         )
      })

  }

<div class="container-fluid ">
              <div class="row">
              <div class="container">
                 <ul class="nav navbar-nav">

                      <li class="dropdown">

                        {shownavlist(allnavitems)}

                      </li>
                 </ul>
              </div>
              </div>
          </div>

I am getting error that map of undefined. How can I dynamically populate navigation bar content ?

JSON data: (console log) below in screenshot is console.log(allnavitems) data.

it should be h.links.map, h will be an object. i will suggest to use a meaningful name. — Mayank Shukla
– Mayank Shukla, Commented Aug 8, 2018 at 14:28
You are calling map again on every item inside the first map. But those are objects. Either get rid of the second map as you already have your objects, or maybe you intended to foreach the childs like h.links.map(..)? — Tobias K.
– Tobias K., Commented Aug 8, 2018 at 14:29
@TobiasK I have edited code but I am getting error: cannot read map of undefined — stone rock
– stone rock, Commented Aug 8, 2018 at 14:31
@stonerock you are not passing any value to function: {shownavlist()}, because of that allnavitems will be undefined. — Mayank Shukla
– Mayank Shukla, Commented Aug 8, 2018 at 14:44
@MayankShukla This should be an answer. This is the problem why allnavitems is undefined. — ChrisR
– ChrisR, Commented Aug 8, 2018 at 14:48

Mayank Shukla · Accepted Answer · 2018-08-08 15:41:26Z

1

Initial issue was, you were not passing any value to {shownavlist()} because of that allnavitems was undefined inside shownavlist function.

Another issue is, you are not returning anything from shownavlist function, by default function will return undefined.

Use className instead of class for CSS.

You need to return the items array (it will contain all the ui elements). Like this:

function shownavlist(allnavitems){
  const items = allnavitems.map( h => {
    return(
        h.links.map( display => {
          return(

            <a href="#" className="dropdown-toggle navbar-link" data-toggle="dropdown">{h.heading}<span className="caret"></span></a>
            <ul className="dropdown-menu {{getTheme slug}}" role="menu">
              <li><a className="navbar-link notAllowed" href="">{display.heading}</a>
              </li>
            </ul>

          )
        })  
     )
  })

  return items;       // <==== added this line

}

Update:

function shownavlist(allnavitems){
  const items = allnavitems.map(h => (
    [

      <a key={1} href="#" className="dropdown-toggle navbar-link" data-toggle="dropdown">
        {h.heading}
        <span className="caret"></span>
      </a>

      <ul key={2} className="dropdown-menu {{getTheme slug}}" role="menu">
        {h.links.map(display => (
          <li key={display.order}>
            <a className="navbar-link notAllowed" href="">{display.heading}</a>
          </li>
        ))}
      </ul>

    ]
  ))

  return items;

}

Added the keys also.

edited Aug 8, 2018 at 15:41

answered Aug 8, 2018 at 14:54

Mayank Shukla

105k19 gold badges163 silver badges146 bronze badges

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

17 Comments

stone rock Over a year ago

I want to display them as a dropdown menu but I am not getting it as expected

stone rock Over a year ago

I think I am not mapping the JSON data correctly. I am not getting navigation bar with dropdown list instead I am getting the whole list of navigation items

stone rock Over a year ago

I want to display heading which will have dropdown items i.e links.heading if possible can you edit the answer with modified mapping.

Mayank Shukla Over a year ago

i did, try the code in update section. i think that will create a dropdown will all the items.

stone rock Over a year ago

Check screenshot -> imgur.com/a/9tWjfYT It is not getting displayed as dropdown item list. In that you can see heading is statistics and it has dropdown batting , bowling, stats

|

Collectives™ on Stack Overflow

How to dynamically populate html content using reactjs?

1 Answer 1

17 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

17 Comments

Your Answer

Sign up or log in

Post as a guest

Related