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

This question is not yet answered, be the first one who answer using the comment. Later the confirmed answer will be published as the solution.

This Question and Answer are collected from stackoverflow and tested by JTuto community, 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?