[SOLVED] React how to style an anchor tag as a tile that remains selected when clicked on it

Issue

This Content is from Stack Overflow. Question asked by curiousCat

I need to style the anchor tag to look like a rectangular tile (which I’m already doing) and when clicked on that tile/anchor tag, I need to do the following 2 things:

  1. Keep it selected and highlight it with Green colour.
  2. On selection or change in selection between TILE-1, TILE-2 and TILE-3, I need to fetch the value of the text in the input field.

Can someone please share any guidelines on how this can be done, please?

 const showTile = (): ReactElement => {
      <ul className="tileList">
        <li>
          <a href="#" class="tile" >
            TILE-1
          </a>
        </li>
        <li>
          <a href="#" class="tile">
            TILE-2
          </a>
        </li>
        <li>
          <a href="#" class="tile">
            TILE-3
          </a>
        </li>
      </ul>

  };
  
  const showTextBox = (): ReactElement => {
  <input type="text" value="">
  };
  
  return (<div> {showTile} {showTextBox} </div>);
ul,
li {
  list-style: none;
}

.tileList > li a {
  color: #505050;
  background-color: #f3f3f3;
  border: 1px solid #ffffff;
  padding: 10px 15px;
  font-size: 13px;
}

.tileList > li a:hover {
  background-color: #e6e6e6;
}

.tileList > li > a {
  border-radius: 4px;
}



.tile {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tileList > li {
  float: left;
}



Solution

use dynamic class for selected tie and a variable for assigned to it
and for changing value make a 2D array and insert the ties value in there then a simple function for changing ties values
its like a puzzle app search for puzzle functions to see more


This Question was asked in StackOverflow by curiousCat and Answered by AliRjbzdeh It is licensed under the terms of CC BY-SA 2.5. - CC BY-SA 3.0. - CC BY-SA 4.0.

people found this article helpful. What about you?