title: reactJS hooks asx Changing the style parameters for a div when it is clicked
body: <p>I have several elements with unique IDs and sharing the same className.  When a user clicks on one of these elements I want to change the background and text colour and the font.</p>
  
  <p>I created two variables (Style1, Style2)which hold the style for the normal and clicked elements.  Style1 is for the clicked element.</p>
  
  <pre><code>const tileStyle1: CSS.Properties = {
      backgroundColor: 'blue',
      fontFamily: 'londrinaBlackRegular',
      color: 'yellow',
    };  
  
    const tileStyle2: CSS.Properties = {
      fontFamily: 'londrinaSketcheRegular'}; 
  </code></pre>
  
  <p>I created a third variable, tileStyle, which is embedded in the HTML for all the elements.  example:</p>
  
  <pre><code>&lt;div className="linkcontainer" ID="Tile3" style={tileStyle} onClick={handleClick}&gt;Marketing&lt;/div&gt;
  
  &lt;div className="linkcontainer" ID="Tile4" style={tileStyle} onClick={handleClick}&gt;Support&lt;/div&gt;
  </code></pre>
  
  <p>I thought to set tileStyle for each element with a ternary operator:</p>
  
  <pre><code>{clickedTile = "Tile3" ? tileStyle = tileStyle1 : tileStyle = tileStyle2;}
  &lt;div className="linkcontainer" ID="Tile3" style={tileStyle} onClick={handleClick}&gt;Support&lt;/div&gt;
  
  {clickedTile = "Tile4" ? tileStyle = tileStyle1 : tileStyle = tileStyle2;}
  
  &lt;div className="linkcontainer" ID="Tile4" style={tileStyle} onClick={handleClick}&gt;Support&lt;/div&gt;
  </code></pre>
  
  <p>But it appears these are not objects in the usual manner and this produces a big error: <strong>Objects are not valid as a React child (found: object with keys{fontFamily})...</strong> </p>