CODEWITHSUNDEEP
javascriptreactjs
Raj Rj
Raj Rj

Reputation: 3577

why data is not rendering using this.props in react js?

I am breaking down my Header into components. Ex: HaderTop, HeaderBottom. Further I m breaking HeaderBottom into more components. One of the component of HeaderBottom is "HeaderTab". I am passing JSON OBJECT DATA through "HeaderTab" component, which I want to loop using "this.props.data.map()" in HeaderTab class. I am not getting any error, but I am not getting the view also. Below is piece of code. "Below I have attached the view also (My UI should look like this)."

import React from 'react';
    import { Link } from 'react-router';

    import HeaderBreadcrumb from './HeaderBreadcrumb';
    import HeaderTab from './HeaderTab';

    export default class HeaderBottom extends React.Component {
        constructor(props) {
            super(props);

          this.state = {
             tabs: 
             [
                {"id":1,"name":"Dental","path":"dentalplan"},                
                {"id":2,"name":"Views","path":"dentalplan"},
                {"id":3,"name":"Accident Companion","path":"dentalplan"},
                {"id":4,"name":"Critical Illness","path":"dentalplan"},
                {"id":5,"name":"Hospital Confinement","path":"dentalplan"}
             ]
          }
       }
        render() {
            return (
                    <div id="layout-navigation" className="layout-navigation">
                      <div className="content-heading">
                        <div className="container">

                          <HeaderBreadcrumb />


                          <div className="content-heading__title">
                            <h1>Dental Plans</h1>
                          </div>

                          <HeaderTab data={this.state.tabs}/> 


                        </div>
                      </div>
                    </div>
            );
        }

    }

    import React from 'react';
    import { Link } from 'react-router';


    export default class HeaderTab extends React.Component {

        render() {
            return (

                <div className="content-heading__tabs" data={this.props.data}>
                    <ul className="tabs tabs--horizontal tabs--overlay">
                              {
                                this.props.data.map(function(item, i) {
                                  <li role="presentation" className="tab">
                                    <Link to={item.path}>{item.name}</Link>
                                  </li>
                                })
                              }
                    </ul>
                </div>    

            );
        }

    }

enter image description here

Upvotes: 0

Views: 340

Answers (2)

Moonjsit
Moonjsit

Reputation: 636

you are not returning a value in map function. Try:

{
    this.props.data.map(function(item, i) { 
       return <li role="presentation" className="tab">
           <Link to={item.path}>{item.name}</Link>
       </li>;
    }) 
}

I see you are using es6 classes. You should also try https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions.

Upvotes: 1

Olivier Boiss&#233;
Olivier Boiss&#233;

Reputation: 18083

I think you need to return an object in the map function : 

this.props.data.map(function(item, i) {
     return (
        <li role="presentation" className="tab">
          <Link to={item.path}>{item.name}</Link>
        </li>
     )
})

Upvotes: 1

Related Questions