CODEWITHSUNDEEP
javascripthtmlreactjs
stone rock
stone rock

Reputation: 1953

How to dynamically populate html content using reactjs?

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.

Upvotes: 1

Views: 601

Answers (1)

Mayank Shukla
Mayank Shukla

Reputation: 104379

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.

Upvotes: 1

Related Questions