React component: Highlight a div in page B when div in page A is clicked

Question

I am trying to figure out the following:

If : addCanvas button is clicked in Dashboard.js (first web page); then: canvasMenu div in TopPanel.js is highlighted by default (child component in second page).

Clicking addCanvas in Dashboard.js not only redirects to Canvas.js (a different parent component). It should also highlight canvasMenu div in TopPanel.js (child component to Canvas.js). So they are two different web pages, and the action in the former should have an effect on the latter.

I've worked on if-else statement but to no avail (seems doesn't make sense for now...).

addCanvas div in Dashboard.js:

 import React from "react";
 import "./Dashboard.css";
 import AddIcon from "../assets/icon_AddDefault.png";
 import IconCanvas from "../assets/icon_Canvas.png";

 import { Link } from "react-router-dom";

 function Dashboard() {
 return(
     <div id="dashboard">

         <input className="searchCanvas" type="search" placeholder="Search speech canvas"></input>

         <Link to="/canvas"> 
             <div className="addCanvas"> //when this is clicked
                 <img className="addIcon" src={AddIcon}/>
                 <p>New Canvas</p>
                 <img className="iconCanvas" src={IconCanvas}></img>
             </div>
         </Link>

     </div>
 );
}

canvasMenu div in TopPanel.js below, which I want to highlight by default:

 import React from "react";
 import "./TopPanel.css";

 class TopPanel extends React.Component {
     constructor(props) {
         super(props);
     } render() {
         return(

          <div id="topPanelStyle">

          <div className="topTitle"></div>

          <div className="topMenu">
            <div className="canvasMenu"><p>Canvas</p></div> //this needs to be highlighted
          </div>
     </div>
   );
  }
 }

Cheshiremoe · Answer 1 · 2022-04-08T01:48:00.513

You can pass the a parameter in the in the link see this question & solutions. The way you have this setup the easy solution is to add a prop (property) to when you create the TopPanel:

<TopPanel isHighlighted={clickedYesNo} />

or

class CanvasPage extends Componet {
  ...
  const props = { 
    // any other needed props
    isHighlighted: true
  }

  render() { 
    ...
    return {TopPanel(props)};
  }
}

then use the isHighlighted prop in you Componet:

class TopPanel extends React.Component {
  constructor(props) {
     super(props);
  } 
  render() {
     return(

      <div id="topPanelStyle">

      <div className="topTitle"></div>

      <div className="topMenu">
        <div className={props.isHighlighted ? "canvasMenu-highlighted" : "canvasMenu"}>
          <p>Canvas</p>
        </div>
      </div>
     </div>
   );
  }
}

The other ways to do this are with state management Context Provider or an API like Redux or Recoil. Using a Context Provider & hooks like useState would require you change over to functional components instead of class. State management is a big topic & you should find plenty of tutorials if you pick an API or hooks as a solution.

React component: Highlight a div in page B when div in page A is clicked

1 Answers1