exercise-react-useeffect.md

Practice: React useEffect

Initial code:

Initial code: https://stackblitz.com/edit/react-kgkeid?file=src%2FApp.js

Note:

• It uses stackblitz's classic engine
• axios is already installed

Iteration 1: display the number of characters (in App.js)

• In App.js: use useEffect & axios to get a list of characters from the API.
• Endpoint: GET https://ih-crud-api.herokuapp.com/characters
• Once you have the list of characters, display that in the console.
• After that, display the number of characters in the user interface (so that the user can see how many characters there are).

Iteration 2: display a list of characters (in App.js)

• Display the list of characters in the user interface (with some info about each character).
• For example, for each character, display something like this:

    <div className="character">
      <p>Name: xxxx</p>
      <p>Weapon: xxxx</p>
    </div>

Notes:

• You will work on App.js (for now, DO NOT CREATE OTHER COMPONENTS)
• You will need a state variable to store the list of characters
  • e.g.: const [characters, setCharacters] = useState([]);
• Once we get the response from the API, update state so that React re-renders the component.
• In your JSX, you will need to iterate through the state variable -e.g.: charactersArr.map()

Bonus

• Display only first 10 characters
• Add CSS
• Implement a button to delete one character (when the user clicks, we send a request to the api)

---

Hints:

• Example of an http request with axios and useEffect: https://stackblitz.com/edit/react-mythfmj3?file=src%2FApp.js

Solutions:

• Iteration 1: https://stackblitz.com/edit/react-wmmoaz?file=src%2FApp.js
• Iteration 2: https://stackblitz.com/edit/react-rtqc32?file=src%2FApp.js