CODEWITHSUNDEEP
reactjsreact-propsreact-component
Zac Taylor
Zac Taylor

Reputation: 391

How to get the prop of another component

I am new to React and I have Googled around but can't figure out how to do what I want to do.

I would like to style a header link differently based on what page I am on. I am wondering how (or if it is possible) to get the prop of another component.


My code so far: 

class Header extends React.Component {

    getClass() {
        console.log(this.props.currentPage) // Prints the correct value
        let headerType = "h2";
        if (this.props.currentPage === /*Prop of current Link*/){
            headerType = "h1"
        }
        return ("header-links " + headerType);
    }

    render() {
        return (
            <Link to="/" page_name="Home" className={this.getClass()}>Home</Link>
            <Link to="/About" page_name="About" className={this.getClass()}>About</Link>
            <Link to="/Other" page_name="Other" className={this.getClass()}>Other</Link>               
        );
    }
}

Is there some way to get the page_name of the Link that is calling getClass()?


I know I could just pass the name of the page into getClass():

<Link to="/" className={this.getClass("Home")}>Home</Link>

But I figure there must be a better way.


I'm sure I could get it using vanilla JavaScript (and maybe that is what I should be doing)... but I would like to know if there is a way to accomplish this with Link's props or something similar.


UPDATE My Route's

<Route exact path='/' component={Home}/>
<Route exact path='/About' component={About}/>
<Route exact path='/Other' component={Other}/>

I also noticed I had Resume as the to prop in the About Link by accident, fixed now.

Upvotes: 2

Views: 795

Answers (3)

ravibagul91
ravibagul91

Reputation: 20755

The idea you already have of passing static name will also work,

<Link to="/" className={this.getClass("Home")}>Home</Link>

Or you can simplify this, (I advise to use this)

<Link to="/" className={"header-links " + (this.props.currentPage === "Home" ? "h1" : "h2")}>Home</Link>
<Link to="/About" className={"header-links " + (this.props.currentPage === "About" ? "h1" : "h2")}>About</Link>
<Link to="/Other" className={"header-links " + (this.props.currentPage === "Other" ? "h1" : "h2")}>Other</Link>

Or another way is passing props in Route's,

<Route exact path='/' component={() => <Home page_name="Home" />}/>
<Route exact path='/About' component={() => <About page_name="About" />}/>
<Route exact path='/Other' component={() => <Other page_name="Other" />}/>

Now in your Header component you can do this,

getClass() {
   console.log(this.props.currentPage) // Prints the correct value
   let headerType = "h2";
   if (this.props.currentPage === this.props.page_name){ //get page_name passed from Route's
       headerType = "h1"
   }
   return ("header-links " + headerType);
}

By passing props in Route's, you need to do prop-drilling.

<Header currentPage="Home" page_name={this.props.page_name} />  //Also need to do for other components

Note: prop-drilling is expensive and not advisable.

Upvotes: 2

StoutLabs
StoutLabs

Reputation: 1

I think you're essentially going about it in a feasible way, although I think you could avoid the need for that by using ternary operators and mapping over an array of your nav link values.

Something like this:

const myLinks = [
  { name: "Home", to: "/" },
  { name: "About", to: "/Resume" },
  { name: "Other", to: "/Other" },
];

const Header = props => (
  <div>
    {myLinks.map((item, i) => (
      <Link
        to={item.to}
        page_name={item.name}
        className={`header-links ${
          props.currentPage === item.name ? " h1" : " h2"
        }`}
      >
        {item.name}
      </Link>
    ))}
  </div>
);

Edit: This is assuming a prop called currentPage is being passed into your header component, of course!

Upvotes: 0

Yousuf Daramay
Yousuf Daramay

Reputation: 127

Well if you're trying to get the props of another component in React, you can use a state management tool like Redux(not necessary here) or put the component in a parent component. <ParentComponent props={this.state.links} /> //passes down links as a prop for example and then you can go access links as a prop in your child component like this.props.links. I would suggest watch some tutorials on passing down props if you're not sure how it works.

Upvotes: 0

Related Questions