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:
- Keep it selected and highlight it with Green colour.
- 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.