Как верно инициализировать функцию в React?

Question

gsdev99 @gsdev99

React

Как верно инициализировать функцию в React?

Всем привет, подскажите, пожалуйста, как правильно решить следующую задачу?
У меня есть некий компонент, выше есть контрол, при нажатии на который срабатывает setState. Мне необходимо вызвать функцию this.setScrollLeft() в которой я устанавливаю на выбранную ноду (ref) в данном случае позицию скола.
Вот моя реализация, но я уверен, что есть более правильное решение:

import React from 'react';
import { ScoreCell, getScoreTheme } from 'components/scores';

class LeaderboardPlayerResult extends React.Component {
    constructor(props) {
        super(props);

        this.containerWidth = 198;

        this.data = this.props.data;
        this.playerResultRef = React.createRef();
    }

    componentDidMount() {
        this.element = this.playerResultRef.current;
        this.element.scrollLeft = this.containerWidth;
    }

    setScrollLeft = () => {
        if (this.element) {
            this.element.scrollLeft = this.containerWidth;
        }
    };

    playerResult = () => {
        if (this.data.playOffHoles) {
            return (
                this.data.playOffHoles.map((item, index) => {
                    return (
                        <div
                            className="leaderboard__player-result-row-wrapper"
                            key={index}
                        >
                            <div className="leaderboard__player-result-row">
                                <div className="leaderboard__player-result-cell">{item.holeId}</div>
                            </div>
                            <div className="leaderboard__player-result-row">
                                <div className="leaderboard__player-result-cell">{item.holePar}</div>
                            </div>
                            <div className="leaderboard__player-result-row">
                                <div className="leaderboard__player-result-cell leaderboard__player-result-cell--score">
                                    <ScoreCell
                                        childCss='tee-times-card__score'
                                        theme={getScoreTheme(item.playOffParScore)}
                                    >{item.playOffParScore}</ScoreCell>
                                </div>
                            </div>
                        </div>
                    );
                })
            );
        }
    };

    render() {
        console.log('LeaderboardPlayerResult render');
        this.setScrollLeft();
        return (
            <div
                className="leaderboard__player-result"
                ref={this.playerResultRef}
            >
                {this.playerResult()}
            </div>
        );
    }
}

export default LeaderboardPlayerResult;