How to limit queryselector to a react component

Question

I have a react component with a list of child-components. In the child-component I want to target a specific DOM element e.g., to change the color in its ComponentDidMount method. How would I do this?

Parent component

export class ListComponent extends Component<...> {
    render(): ReactNode {
        return (
            <div>
                <ListItemComponent key="123"/>
                <ListItemComponent key="456"/>
                <ListItemComponent key="789"/>
            </div>
        );
    }
}

Child component

export class ListComponent extends Component<...> {
    componentDidMount(): void {
//      const elementToChange = document.queryselector(".toTarget");  // Only works for the first element as it only targets the first on the page
        const elementToChange = THISREACTCOMPONENT.queryselector(".toTarget");
        elementToChange.style.backgroundColor = "123123";
    }

    render(): ReactNode {
        return (
            <div>
                <div className="toTarget">
            </div>
        );
    }
}

So, the question is, what should be instead of THISREACTCOMPONENT? How to target an element exclusively within the react component?

Answer 1

use a react ref. Refs were created so you won't have to use queryselector, as interacting directly with the dom may lead to react bugs further down the line.

  export  class ListComponent extends Component<...> { {
      constructor(props) {
        super(props);
        this.myRef = React.createRef(); // Get a reference to a DOM element
      }
    componentDidMount(): void {
        const elementToChange = this.myref.current;
        elementToChange.style.backgroundColor = "123123";
    }
      render() {
        return (
            <div>
                <div className="toTarget"  ref={this.myRef}> // binds this element to the this.myref variable
            </div>
        )
      }
    }