import React from 'react';
import Button from './Button';

const buttonTypes = [
    {id: 1, type: "A", score: 50},
    {id: 2, type: "B", score: 30},
    {id: 3, type: "C", score: 20},
    {id: 4, type: "D", score: 15},

];

class Main extends React.Component{

    constructor(props){
        super(props);
        this.state = {
            list: []
        };
    }

    // Tanken her e at æ ska legg til dem klikka knapp-typen til i lista i state
     addToList(id){
        for(let i = 0; i<buttonTypes.length; i++){
            if(buttonTypes[i].id === id){
                alert("match!");
                this.setState(prevState =>({
                    list: [...prevState, buttonTypes[i]]
                }))
            }
        }
    }

    //Oppretta knapp-element
    buttons = buttonTypes.map((button)=>
        <Button
            type={button.type}
            score = {button.score}
            id = {button.id}
            addValue = {this.addToList.bind(this)}
            style={style} />
    );

    render(){
        return(
            <div>
                {this.buttons}
            </div>
        );
    }

}

const style = {
    height: 100,
    width: 100,
    margin: 20,
    textAlign: 'center',
    display: 'inline-block',
};

export default Main;

-------------------------------------------------------------------------------------------------------------------------
import React from 'react'
const Button = (props)=>{

    function onButtonPress(){
        props.addValue(props.id);
    }

    return(
        <div>
            <button label="Default" onClick={onButtonPress} style ={props.style}>{props.type}
            </button>
        </div>
    );
}

export default Button;