I am trying to style the anchor tag to appear as a rectangular tile (which is already in progress). When the tile/anchor tag is clicked, I need it to do the following two things:
- Remain selected and highlight with a green color.
- Upon selection or change between TILE-1, TILE-2, and TILE-3, I need to retrieve the value of the text in the input field.
Could someone provide guidelines on how to achieve this, please?
const showTile = (): ReactElement => {
<ul className="tileList">
<li>
<button href="#Tile1" class="tile" >
TILE-1
</button >
</li>
<li>
<button href="#Tile2" class="tile">
TILE-2
</button >
</li>
<li>
<button href="#Tile3" class="tile">
TILE-3
</button >
</li>
</ul>
};
const showTextBox = (): ReactElement => {
<input type="text" value="">
};
const [selectedTile, setSelectedTile] = useState("");
const [textVal, setTextVal] = useState("");
return (<div> {showTile} {showTextBox} </div>);
ul,
li {
list-style: none;
}
.tileList > li button {
color: grey;
background-colour: yellow;
border: 1px solid #ffffff;
padding: 10px 15px;
font-size: 13px;
}