How to correctly initialize a function in React?

Admin 1
Viewed 5558

tell me, please, how to solve the following problem correctly? I have a certain component, there is a control above, when I click on it, setState is triggered. I need to call the function this.setScrollLeft () in which I set to the selected node (ref) in this case the cleavage position. Here is my implementation, but I am sure that there is a better solution:

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>
        );
    }
}
reactjs
1 Answers

The best place to put this.setScrollLeft() is inside the componentDidUpdate method.

You are already calling this method (this.setScrollLeft()) inside componentDidMount, what is right. Now, you could put another call into componentDidUpdate and it will work pretty much as it is working by now because componentDidUpdate is called before render.

The final outcome will be the same, however, you are separating the concerns: render only render the components and the other methods deal with your business logic.

If you are not sure about componentDidMount and componentDidUpdate, see these excerpts from the official React.js documentation:

componentDidMount()

componentDidMount() is invoked immediately after a component is mounted. Initialization that requires DOM nodes should go here. If you need to load data from a remote endpoint, this is a good place to instantiate the network request. Setting state in this method will trigger a re-rendering.

componentDidUpdate()

componentDidUpdate() is invoked immediately after updating occurs. This method is not called for the initial render.

user_79487310
Related