Among my collection of elements with distinct IDs and a common className, I aim to modify the background, text color, and font when a user interacts with them.
To achieve this, I defined two variables (Style1 and Style2) to represent the styles for normal and clicked elements respectively. Style1 applies to the clicked element.
const tileStyle1: CSS.Properties = {
backgroundColor: 'blue',
fontFamily: 'londrinaBlackRegular',
color: 'yellow',
};
const tileStyle2: CSS.Properties = {
fontFamily: 'londrinaSketcheRegular'
};
I also established a third variable named tileStyle which is integrated into the HTML structure of all elements. For instance:
<div className="linkcontainer" ID="Tile3" style={tileStyle} onClick={handleClick}>Marketing</div>
<div className="linkcontainer" ID="Tile4" style={tileStyle} onClick={handleClick}>Support</div>
Initially, I tried using a ternary operator to assign tileStyle dynamically to each element:
{clickedTile === "Tile3" ? tileStyle = tileStyle1 : tileStyle = tileStyle2;}
<div className="linkcontainer" ID="Tile3" style={tileStyle} onClick={handleClick}>Support</div>
{clickedTile === "Tile4" ? tileStyle = tileStyle1 : tileStyle = tileStyle2;}
<div className="linkcontainer" ID="Tile4" style={tileStyle} onClick={handleClick}>Support</div>
Unfortunately, it seems that these are not standard objects, leading to a significant error message: Objects are not valid as a React child (found: object with keys {fontFamily})...