REACT: How to modify styles from another component

Question

The page of my site are build with these components:

Obviusly, Header and Footer for all the pages are always the same, but content loaded from Routes is not equal for each page. Ok, I make click over an option of the meny which is in Header component. I go to the page and the name of the option of the menu is correctly underlined.

For example, I'm at home and click over FAQS, I go to FAQS page and FAQS option is underlined.

But, I can go to whatever page from Routes or Footer component. For example, in Footer component I've got an option to go to FAQS page. If I click over this option, I go to FAQS page, but the style of FAQS option in the menu is not updated.

I have checked that in this case are not called methods like componentDidMount or componentDidUpdate.

Therefore, how can I update always the options of the menu which are in Header component?

Edit I:

header.js file

import React, { Component } from "react";
import {Row, Col} from "react-bootstrap";
import "bootstrap/dist/css/bootstrap.min.css";
import { NavLink } from "react-router-dom";
import "../css/header.css";
import logo  from "../images/logo.png";

export class Header extends Component{
    constructor(props){
        super(props);
        this.state = {
            option1: String(window.location).endsWith("/faqs"),
            option2: String(window.location).endsWith("/about"),
            option3: String(window.location).endsWith("/login")
        }
        this.handleClick = this.handleClick.bind(this);
    }

    componentDidMount(){
        window.scrollTo(0, 0);
        console.log("Header.js(ComponentDidMount): Component cargado correctamente!!!");
    }

    componentDidUpdate(){
        window.scrollTo(0, 0);
        console.log("Header.js(componentDidUpdate): Component cargado correctamente!!!");
    }

    removeUnderline(){
        this.setState({
            option1: false,
            option2: false,
            option3: false
        })
    }

    handleClick(event){
        this.removeUnderline();
        if (event.target.id !== "logo"){
            this.setState({
                option1: event.target.id === "option1",
                option2: event.target.id === "option2",
                option3: event.target.id === "option3"
            })    
        }
    }

    render(){
        return(
            
                
                        
                            
                                
                            
                        
                        
                            
                                FAQS
                             | 
                            
                                About us
                             | 
                            
                                Login
                            
                        
                              
            
        )
    }
}

footer.js file

import React from "react";
import {Row, Col} from "react-bootstrap";
import "bootstrap/dist/css/bootstrap.min.css";
import InstagramIcon from '@material-ui/icons/Instagram';
import FaceboookIcon from '@material-ui/icons/Facebook';
import {NavLink} from "react-router-dom";


export const Footer = () => {
    return(
        
            
                
                     
                
            
            
                Login
                Contact us
                About us
                FAQ
                Privacy Policy
            
            
                @Copyright 2020 Breaded
            
        
    )
};

Edit II:

Router are wrapping to each component: Header, Routes and Footer

export const Container = () => {
    return(
        
            
                
                
                
                        
        
    )

}

routes.js

import React from "react";
import { Home } from "./pages/home/home";
import { About } from "./pages/about";
import  FAQ from "./pages/faq/faq";
import { Plans } from "./pages/plans/plans";
import { P404 } from "./pages/notfound";
import {
    Switch,
    Route,
  } from "react-router-dom";

export const Routes = () => {
    return(
        
            
            
            
            
            
        
    )
}

What am I doing wrong?

Seth Lutske · Accepted Answer

The way you are applying your css text effects is not ideal. It works in header, but requires a ton of unnecessary logic that is not present in your Footer. And copying all that code would be a big violation of DRY. But even better than abstracting the logic and applying to both components, react router has activeClassName and activeStyle that you can use to style active NavLinks. Just use them similarly in both Header and Footer. Using activeClassName and showing only the parts of the code you need here:

// Header.js


  
    
  


  
    FAQS
   | 
  
    About us
   | 
  
    Login

You can do the same in Footer:

// Footer.js


  
    Login
  


  
    Contact us
  


  
    About us
  


  
    FAQ
  


  
    Privacy Policy

And then in some associated css file, you can say:

.active-nav-link {
  text-decoration: underline
}

I don't remember if the NavLink returns an or an

with a nested , so that might affect how you write your css. You can also use activeStyle and do inline styles as an object, as you had been doing in your original code. Either way will work.

REACT: How to modify styles from another component

Answers (1)

Related Questions