import React from 'react';

class misc {
    static makeid(length) {
        var result           = '';
        var characters       = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
        var charactersLength = characters.length;
        for ( var i = 0; i < length; i++ ) {
        result += characters.charAt(Math.floor(Math.random() * charactersLength));
        }
        return result;
    }
}

class Multitest extends React.Component {
    state = {
        elements: {
            bicboi: 2,
            sbd: "gucci",
            baksaj: "std"
        }
    }

    constructor(props) {
        super(props);
        this.addToObject = this.addToObject.bind(this);
    }
    render () {
        let renderthis = [];
        Object.keys(this.state.elements).forEach((key,i) => {
            renderthis.push(<div key={i}>{key}: {this.state.elements[key]}</div>);
        });
        return (
            <>
              <button onClick={this.addToObject}>Add to object</button>
              {renderthis}
            </>
        )
    }
    addToObject() {
        let newElements = this.state.elements;
        const key = misc.makeid(8);
        Object.assign(newElements, {[key]: Math.random()});
        this.setState({elements:newElements});
    }

}

export default Multitest;