I cannot read the properties of the children sent from the parent

Question

I am new to reactjs. I am using router and send the appropriate children based on the url. The following is the structure of my index.js:

class Tj extends React.Component {
render() {
    return (
        <Router history={browserHistory}>
            <Route path={"/"} component={Bridge} >
                <IndexRoute component={Home} />
                <Route path={"user"} component={T} />
                <Route path={"home"} component={Home} />
            </Route>
            <Route path={"home"} component={Home} />
        </Router>
    );
}
}
 render(
  <Provider store={store}>
    <Tj/>
</Provider>,
window.document.getElementById('mainContainer'));

So far so good. Now I need to get the children in bridge.js and decide the output for rendering based on the type of children passed.

import React from "react";
import {Header} from "../components/Header";
export class Bridge extends React.Component {
render() {
    var Content;
    if(this.props.children.tag==="homeTag"){
    Content=<div>
        <div className="row">
            <Header/>
        </div>
        <div className="row">
            {this.props.children}
        </div>
    </div>;
      }else{
        some other code to render}

    return (

        Content

    );
}
}

The problem starts exactly at this point. So here I check the tag which a property I set in the each element I sent in index.js such as Home.js but though I set tag for the components it is undefined. The following is the Home.js:

class Home extends React.Component {
render() {
    return (
        <div>
                <MainComp tag="homeTag"/>
          </div>
    );
   }
 }

As you can see I send the tag in Home.js but in bridhe.js when I try to read it it is undefined. Can anyone help?

*************UPDATE****************************************** More explanation: I am using tag to be able to distinguish the type of the component has been sent. Maybe it was better if I named it type. So in bridge.js then I check the type of the component and if it is for example Home component I show header as well if not then I just show the component sent without any header.

I don't understand what `tag` is, where you set it, or why you use it. Can you please explain? — Chris, Dec 19 '16 at 08:31
@Chris actually I am using tag to be able to distinguish the type of the component has been sent. Maybe it was better if I named it type. So in bridge.js then I check the type of the component and if it is for example Home component I show header as well if not then I just show the component sent without any header. Please let me know if you need me to clarify it more — Hamed Minaee, Dec 19 '16 at 12:23

score 0 · Accepted Answer · edited May 23 '17 at 11:45

I found a solution for this and I though it may worth it to share with anyone who has the same problem. I made a silly mistake. So instead of checking the child sent from the template it is better to define different route with different template such as :

<Router history={browserHistory}>
        <Route path={"/"} component={Bridge} >
            <IndexRoute component={Home} />
            <Route path={"user"} component={T} />
            <Route path={"home"} component={Home} />
        </Route>
        <Route path={"/"} component={Bridge2} >
            <IndexRoute component={Test1} />
        </Route>
        <Route path={"home"} component={Home} />
    </Router>

Also for more info please take a look at this link: related answer

I cannot read the properties of the children sent from the parent

1 Answers1