Html Question posted in
Some basic documentation can be found here.

Html – How to compare two tsx elements in react + tsx

i want to compare two react tsx elements. i am still new to react and tsx. but i am unale to do so even after copying and pasting the exact elements to compare. Can you tell me why and how to fix it?

Here is where i want to compare

function placeTile(index: number) {
    if (
      tiles[index] ===                  //Compare here
      (
        <div className="filler" id=".">
          .
        </div>
      )
    ) {
      let updateTile = tiles.slice();
      updateTile[index] = (
        <div className="filled" id={move}>
          {move}
        </div>
      );
      console.log("Filled a spot");
      setTiles(updateTile);
    } else {
      console.log("This is filled spot " + index);
    }
  }

The ’tiles’ is an array of the very same tsx elements declared as follows

let createTileSetup = Array(9).fill(
    <div className="filler" id=".">
      .
    </div>
  );

const [tiles, setTiles] = useState(createTileSetup);

Using something like tiles[index].id to get the id isnt working. It is just saying it is undefined

If there is another way please tell me. their ids are different but i dont know how to compare those either. any help is appreciated

Tags:

2

Answers


  1. 0

    The reason your strategy doesn’t work is because for Javascript objects, the === operator tests for identity (ie: whether they refer to the same object) rather than any sort of equivalence structurally.

    To fix this, use some other test to check for equality of the objects. To test, for example, the className of your <div>s, you could write

    
if (
      // .props.className gets the className of an HTML tag
      tiles[index].props.className === 'filler'
    )
{
    // Do something
}

    Be wary that if you do this, you must also check that each tiles[index] is indeed an HTML tag. Otherwise, tiles[index].props.className may cause an error accessing property className of undefined.

    Hope this helps.

    Login or Signup to reply.
  2. 0

    compare properties of the elements rather than the elements themselves. instead of directly comparing JSX elements, compare the id property of the tiles. If the id matches the expected value (in this case "."), update the tile at the specified index.

    const initialTiles = Array(9).fill({ className: "filler", id: ".", content: "." });
const [tiles, setTiles] = useState(initialTiles);
function placeTile(index: number) {
  if (tiles[index].id === ".") {  // Compare the id property
    let updateTile = [...tiles];
    updateTile[index] = { className: "filled", id: move, content: move }; 
    setTiles(updateTile);
  } else {
    console.log("This is a filled spot " + index);
  }
}
return (
  <div className="tile-container">
    {tiles.map((tile, index) => (
      <div
        key={index}
        className={tile.className}
        id={tile.id}
        onClick={() => placeTile(index)}
      >
        {tile.content}
      </div>
    ))}
  </div>
);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search