import React from 'react';

import ListElement from "./ListElement";
import style from './ListContainer.module.css';

class ListContainer extends React.Component {
    constructor(props, context) {
        super(props, context);

        this.state = {
            elements: [],
            title: "Container of Elements"
        }

        this.handleclick = this.handleclick.bind(this);
    }

    render() {
        return (
            <div className={style.mainbody}>
                <div className={style.title}>
                    {this.state.title}
                </div>
                <div>
                    <button onClick={this.handleclick}>click me</button>
                </div>
                <div>
                    {
                        this.state.elements.map((elemname) => (
                            <ListElement></ListElement>
                        ))
                    }
                </div>
            </div>
        );
    }

    handleclick() {
        let elems = this.state.elements;
        elems.push("TESTNAME");
        this.setState({elements: elems, title: "Container of several Elements"});
    }
}

export default ListContainer;