React - How can a functional component use a 'this' property - reactjs

Question

I'm trying to make a page where there are multiple instances of the same functional component inside a parent component. Upon clicking anywhere inside the parent component I want each individual child component to check if the 'event.target' is equal to itself, if it isn't, then I want it to do something.
Maybe I got the wrong idea about this, but is there a way to use a 'this' property inside a function component or a way to mimic it?
edit: some code
Parent component:
import React, { useState } from "react"
import ShopppingListItem from './ShoppingListItem'
function ShopppingList(){
const [list, setList] = useState([{id: 0,text: 'dfdsdf'}, {id: 1,text: 'dfdsdf'},
{id: 2,text: 'dfdsdf'}, {id: 3,text: 'dfdsdf'}]) //shopping list example
const [clickedTarget, setClickedTarget] = useState(null)
const handleClick = (e) => {
setClickedTarget(e.target)
}
return(
<ol
className='shopping-list-container'
onClick={handleClick}
>
{
list.map(item => {
return <ShopppingListItem key={item.id} item={item} clickedTarget={clickedTarget}/>
})
}
</ol>
)
}
export default ShopppingList
Child component:
import React, { useState } from 'react'
function ShoppingListItem(props){
const id = props.item.id
const [text, setText] = useState(props.item.text)
const [editMode, setEditMode] = useState(false)
const clickedTarget = props.clickedTarget
const inputStyle={
width: "15vw",
border:"0px",
font:"400 20px Segoe UI",
paddingLeft:"1px"
}
//////////////////////////////////////
React.useEffect(() => {
if (this != clickedTarget) //the idea behind what im trying to achieve
{ do something }
}, [clickedTarget])
//////////////////////////////////////
const handleTextClick = () => {
setEditMode(!editMode)
}
const handleChange = (e) => {
setText(e.target.value)
}
return(
<div className='shopping-list-item'>
<span style={{paddingRight:"5px"}}>{id}. </span>
{!editMode
? <span onClick={handleTextClick}>{text}</span>
: <input
ref={element}
style={inputStyle}
type="text"
value={text}
placeholder={text}
onChange={handleChange}
/>}
</div>
)
}
export default ShoppingListItem