React

by jonahe

HTML

<div id="app"></div>

CSS

.main-component {
  padding: 10px;
}

.content-wrapper{
  display: flex;
  align-items: center;
  justify-content: space-between;
}


ul.thing-list {
  list-style: disc;
  padding: 20px;
}

li.thing-item {
  margin: 5px;
  cursor: pointer;
}

.button-wrapper {
  display: flex;
  flex-direction: column;
}

.my-button {
  padding: 10px;
}

React

const { useState } = React;

const Item = ({text, handleClick }) => {
 	// Nothing to see here - move along
	return <li onClick={handleClick} className="thing-item">{text}</li>;
}


/** 
	Uppgift:
	Läs igenom koden nedan och lös ett problem i taget.

*/
const App = () => {
	const [favoriteThings, setFavoriteThings] = useState(["array", "const", "function"]);
  
  const clearFavoriteThings = () => {
  	alert("Some work is needed here..");
    /** 
    	Uppgift: Visa en tom lista
      
    	Listan genereras genom att "mappa" över
      array:en 'favoriteThings' som till att börja med har tre saker i sig
    	Vi skulle behöva "ändra" 'favoriteThings' på ett sätt som får
      komponenten att om-rendera, denna gång med NOLL saker i sig.
    */
  };
  
  const addLemonToList = () => {
  	alert("Some more work is needed here..");
    const itemToAdd = "lemon";
    /**
    	Uppgift: Se till att listan visas med ordet "lemon"
      
    	Innehållet i array:en 'favoriteThings' bestänmer vilka
      saker som renderas ut i listan.
     	Hur kan vi se till att listan uppdateras till att bli det gamla värdet plus en till item "lemon"?

    */
  }
  
  const lastestClickedItem = "Unknown..";
  const handleItemClick = (text) => {
  	alert("you clicked " + text + ", but something is missing?");
    /** 
  	Uppgift: Håll koll på vilken item vi sist klickade på
    
    Vi behöver 
    	1. en variabel som håller senaste klickade värdet
      2. ett sätt att uppdatera det senaste vördet och skapa en re-render
      
    Låter problemet bekant? 
    
  */
  }
  
	return <div className="main-component">
	  <h2>My favorite things: </h2>
    
    <div className="content-wrapper">
      <ul className="thing-list">
        { 
          favoriteThings.map((favoriteThing, index) =>
            <Item key={index} text={favoriteThing} handleClick={() => handleItemClick(favoriteThing)} />
          ) 
        }
      </ul>
      <div className="button-wrapper">
         <button...