React Map onClick and "this" undefined - reactjs

Question

UPDATED:
function TheCards() {
let cardMasterList = require('./scryfall-oracle-cards.json')
let cardMasterListSorted = sortByKey(cardMasterList, 'name')
let [cardClicked, setCardClicked] = useState(null)
//console.log(cardMasterList[0].name)
//console.log(cardMasterListSorted)
const handleClick = () => {
setCardClicked('red')
console.log(cardClicked)
//Please make this do something with the clicked span tag!
}
return (
<form id="card-master-list">
{cardMasterListSorted
.filter(({legalities}) => legalities.vintage === 'legal')
.filter(({rarity}) => rarity === 'common' || 'uncommon')
.slice(0,10)
.map(
(cardName) => {
return (
<li key={cardName.id}>
<span className="card-name" onClick={ handleClick }>{cardName.name}</span>
</li>
)
}
)
}
</form>
)
}
Update: This is the updated code above. I STILL can't figure out how to reference what I'm clicking on. I want to do more than simply change the color of the text, I'm just using "change it to red" as something simple to do. I am sad to say I'm missing jQuery and its easy "this" reference points, because something like "this.handleClick" doesn't work.
function TheCards() {
let cardMasterList = require('./scryfall-oracle-cards.json')
let cardMasterListSorted = sortByKey(cardMasterList, 'name')
console.log(cardMasterList[0].name);
console.log(cardMasterListSorted)
return (
<form id="card-master-list">
{cardMasterListSorted
.filter(({legalities}) => legalities.vintage === 'legal')
.filter(({rarity}) => rarity === 'common' || 'uncommon')
.map(
(cardName) => {
return (
<li key={cardName.id}>
<span className="card-name" onClick={ function DoTheThing() { document.querySelector('.card-name').style.color = 'red' } }>{cardName.name}</span>
</li>
)
}
)
}
</form>
)
}
All I want to do is so when the span is clicked on, it turns red. This seems impossible as nothing I try works - writing another function to fire in any way I can think of. "this" isn't working as expected. What can I replace the document.querySelector line with to make it work?

Answer 1

The method in your code is not the recommended way of updating the UI when rendering with React. Ideally you would update the style of the span via styling data stored in your components state:
<li key={cardName.id}>
<span className="card-name" onClick={
() => {
/* Set the color state of component to red which triggers a
render() and will update the style prop of the span
accordingly */
this.setState({ color : 'red' });
}
} style={{ color : this.state.color }}>
{cardName.name}</span>
</li>
If you really want to update the styling via the pattern in your original code, then one way to do this would be via a "callback ref" which would give you access to the span's corresponding DOM element:
<li key={cardName.id}>
<span className="card-name" ref={ (spanElement) => {
spanElement.addEventListener('click', () => {
spanElement.style.color = 'red';
});
}}>
{cardName.name}</span>
</li>

Answer 2

Here's an example of how to update styles the React way:
import React, { useState } from "react";
import ReactDOM from "react-dom";
const tiles = [
{
id: 1,
n: "one"
},
{
id: 2,
n: "two"
}
];
const App = () => {
const [clickedId, setClickedId] = useState(null);
const click = id => {
setClickedId(id);
};
return (
<div style={{ display: "flex", flexDirection: "column" }}>
{tiles.map(tile => (
<div
onClick={() => click(tile.id)}
style={{ color: tile.id === clickedId ? "red" : "black" }}
>
{tile.n}
</div>
))}
</div>
);
};
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
Live example here.

Answer 3

That should work as you have it. Though as codecubed.io pointed out is not a very react way to do it. instead it is preferred to toggle a class. something like this:
const styles = {
redTextClass: {
color: 'red',
}
}
<span className={stateVariable ? styles.redTextClass : null}></span>