Unstable iframe

Your task is to display a list of iframes without reloading them. The iframe randoms a number on page load. If the iframe reloads, it will show a different number.

Clicking on the "add" button should add a new iframe at the beginning of the list. The provided code is not working as expected because it appends the iframe at the end.


Requirements:

  • Display an empty list by default.
  • Clicking on the "add" button should add a new iframe at the beginning.
  • Once the iframe is loaded, it should never reload. It should always display the same number.
  • The iframe URL is https://unstable-iframe.netlify.app. Do not change it.
  • Do not use CSS to change the order.
  • Try to create a clean React solution without hacks.

You are free to add classes, styles, ids, but don't edit or remove data-test attributes.
Create an account to start coding
Create account