buttonI 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>
          <button href="#Tile1"  >
            TILE-1
          </button >
        </li>
        <li>
          <button  href="#Tile2" >
            TILE-2
          </button >
        </li>
        <li>
          <button  href="#Tile3" >
            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;
}

CodePudding user response：

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

CodePudding user response：

I solved it like this.

state ={
  selected: false
}

selectedHandle = () => {
 const {selected} = this.state
   this.setState({selected: true})
}


        <li onClick={() => this.selectedHandle()}>
          <a href="#Tile1"  class={{selected === true ? "active" : "passive"}} >
            TILE-1
          </a>
        </li>

for fetching the value you can following this question how to use event.target.value in li