<commit_before>import React from 'react';
import ProviderCard from './ProviderCard';

import { Button } from "react-bootstrap";

class ProvidersList extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            offset: 50,
        };

    };


    loadMore(){
        this.setState({
          offset: this.state.offset +=50
        });

    }

    render() {
        const styles = {
            activitiesStyle: {
                display: "flex",
                flexWrap: "wrap",
                flexDirection: "row",
                justifyContent: "space-around",
                width: '100%',
            },

        };


        // If no providers found
        if (this.props.providers.length < 1) {
            return <h1>Ingen arrangører funnet</h1>;
        }




        const prov = this.props.providers.slice(0, this.state.offset);




        const providers = prov.map(provider =>
            <ProviderCard key={provider.Id} provider={provider} id={provider.Id}/>
        );

        return <div style={styles.activitiesStyle}>
            {providers}
            <Button   className="btn-success" onClick={() => this.loadMore()}>Last flere</Button>
        </div>
    }
}

export default ProvidersList;
<commit_msg>added comment<commit_after>import React from 'react';
import ProviderCard from './ProviderCard';

import { Button } from "react-bootstrap";

class ProvidersList extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            offset: 50,
        };

    };


    loadMore(){
        this.setState({
          offset: this.state.offset +=50
        });

    }

    render() {
        const styles = {
            activitiesStyle: {
                display: "flex",
                flexWrap: "wrap",
                flexDirection: "row",
                justifyContent: "space-around",
                width: '100%',
            },

        };


        // If no providers found
        if (this.props.providers.length < 1) {
            return <h1>Ingen arrangører funnet</h1>;
        }



        // Slice the reducer data that is provided to match the offset. 
        const prov = this.props.providers.slice(0, this.state.offset);




        const providers = prov.map(provider =>
            <ProviderCard key={provider.Id} provider={provider} id={provider.Id}/>
        );

        return <div style={styles.activitiesStyle}>
            {providers}
            <Button   className="btn-success" onClick={() => this.loadMore()}>Last flere</Button>
        </div>
    }
}

export default ProvidersList;

{'fraction_non_alphanumeric': 0.12414578587699317, 'fraction_numerical': 0.008352315869400152, 'mean_word_length': 1.713697219361483, 'pattern_counts': {'":': 0, '<': 19, '<?xml version=': 0, '>': 21, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2748413', 'n_tokens_mistral': 753, 'n_tokens_neox': 698, 'n_words': 162}