SHARE
TWEET

Untitled

a guest Feb 22nd, 2019 59 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React from 'react';
  2. import Button from './Button';
  3.  
  4. const buttonTypes = [
  5.     {id: 1, type: "A", score: 50},
  6.     {id: 2, type: "B", score: 30},
  7.     {id: 3, type: "C", score: 20},
  8.     {id: 4, type: "D", score: 15},
  9.  
  10. ];
  11.  
  12. class Main extends React.Component{
  13.  
  14.     constructor(props){
  15.         super(props);
  16.         this.state = {
  17.             list: []
  18.         };
  19.     }
  20.  
  21.     // Tanken her e at æ ska legg til dem klikka knapp-typen til i lista i state
  22.      addToList(id){
  23.         for(let i = 0; i<buttonTypes.length; i++){
  24.             if(buttonTypes[i].id === id){
  25.                 alert("match!");
  26.                 this.setState(prevState =>({
  27.                     list: [...prevState, buttonTypes[i]]
  28.                 }))
  29.             }
  30.         }
  31.     }
  32.  
  33.     //Oppretta knapp-element
  34.     buttons = buttonTypes.map((button)=>
  35.         <Button
  36.             type={button.type}
  37.             score = {button.score}
  38.             id = {button.id}
  39.             addValue = {this.addToList.bind(this)}
  40.             style={style} />
  41.     );
  42.  
  43.     render(){
  44.         return(
  45.             <div>
  46.                 {this.buttons}
  47.             </div>
  48.         );
  49.     }
  50.  
  51. }
  52.  
  53. const style = {
  54.     height: 100,
  55.     width: 100,
  56.     margin: 20,
  57.     textAlign: 'center',
  58.     display: 'inline-block',
  59. };
  60.  
  61. export default Main;
  62.  
  63. -------------------------------------------------------------------------------------------------------------------------
  64. import React from 'react'
  65. const Button = (props)=>{
  66.  
  67.     function onButtonPress(){
  68.         props.addValue(props.id);
  69.     }
  70.  
  71.     return(
  72.         <div>
  73.             <button label="Default" onClick={onButtonPress} style ={props.style}>{props.type}
  74.             </button>
  75.         </div>
  76.     );
  77. }
  78.  
  79. export default Button;
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top