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
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.
4
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>
);
2