Render of list of items fails after setting new State (using useState)

[AhnafCodes]

initial State renders options re-render after fetch fails.

Looks like I am missing something really fundamental, please correct me

https://codepen.io/ahnafcodes/pen/VweKYEr

WebReflection commented 4 years ago

You either return a reference or you create each time from scratch the whole thing without replacing it.

Example:

const {augmentor: $, useRef, useState} = augmentor;
const {render, html} = lighterhtml;

const Nations = () => $(() => {
  let [nations, setNations] = useState([
    {name: "United States of America", topLevelDomain: [".us"], alpha2Code: "US", alpha3Code: "USA"},
    {name: "Canada", topLevelDomain: [".ca"], alpha2Code: "CA", alpha3Code: "CAN"}
  ]); 
  return html.for(useRef(null))`
    <select> ${nations.map(nation=>html`<option>${nation.name}</option>`)}<select>
    <button onclick=${
      () => fetch('https://restcountries.eu/rest/v2/lang/en')
             .then(response => response.json())
             .then(setNations)
    }>
      Get Nations
    </button>
  `;
});

const content = Nations();
render(document.body, content);

I suggest you use neverland instead, which was born exactly to simplify that part: https://codepen.io/WebReflection/pen/YzwGXxR?editors=0010

• © Githubissues.
• Githubissues is a development platform for aggregating issues.

[WebReflection]

You either return a reference or you create each time from scratch the whole thing without replacing it.

Example:

const {augmentor: $, useRef, useState} = augmentor;
const {render, html} = lighterhtml;

const Nations = () => $(() => {
  let [nations, setNations] = useState([
    {name: "United States of America", topLevelDomain: [".us"], alpha2Code: "US", alpha3Code: "USA"},
    {name: "Canada", topLevelDomain: [".ca"], alpha2Code: "CA", alpha3Code: "CAN"}
  ]); 
  return html.for(useRef(null))`
    <select> ${nations.map(nation=>html`<option>${nation.name}</option>`)}<select>
    <button onclick=${
      () => fetch('https://restcountries.eu/rest/v2/lang/en')
             .then(response => response.json())
             .then(setNations)
    }>
      Get Nations
    </button>
  `;
});

const content = Nations();
render(document.body, content);

I suggest you use neverland instead, which was born exactly to simplify that part: https://codepen.io/WebReflection/pen/YzwGXxR?editors=0010