Jak v Reactu řešit null hodnoty na inputu?

registrovany123

  • *****
  • 635
  • Místo: Plzeň
Jak v Reactu řešit null hodnoty na inputu?
« kdy: 14. 03. 2024, 14:03:38 »
Řeším takový problém v UI a říkal jsem si, že zkusím štěstí tady, třeba se tu najde nějaký šikovný frontendář.

Problém je teda ten, že API v backendu vám vrací array nějakých objketů, a vy je přímo tak jak přišly renderujete do tabulky.

No a jaksi backend, když má nějaký atribut s primitivním dat. typem, tak prostě vrátí null, a nikoliv empty string, když ta hodnota není přítomna. A když je něco zase list a ten není přítomen, tak vrátí null, a ne empty list.

Když je potom null atribut dán přímo jako input value do nějakého html tagu, tak to vypíše warning do konzole:

Citace
Warning: `value` prop on `input` should not be null. Consider using an empty string to clear the component or `undefined` for uncontrolled components.

Takže otázka je, co s tím. Nepovažuju za správné řešení modifikovat backend, aby nepoužíval nully. A zároveň nechci všude chekovat null na frontendu:


<input type="text" value={items[index].hodnota ? items[index].hodnota : ""} />


Tipuju že nějaké kloudné řešení na to neexistuje. Já jinak nechám vypisovat ty warningy, nechci to totiž řešit ani jedním způsobem.
Od roku 2005 se zabývám SW Vývojem, načež od roku 2015 je to i mé povolání. Specializuji se na Javu, a v posledních letech i na Python a intranetové aplikace v Reactu. Delám v AWS Cloudu.


registrovany123

  • *****
  • 635
  • Místo: Plzeň
Re:Jak v Reactu řešit null hodnoty na inputu?
« Odpověď #1 kdy: 14. 03. 2024, 14:20:25 »
Jo ještě se to dá zkrátit jen na tohle, to už je přijatelnější:


<input type="text" value={items[index].hodnota || ""} />
Od roku 2005 se zabývám SW Vývojem, načež od roku 2015 je to i mé povolání. Specializuji se na Javu, a v posledních letech i na Python a intranetové aplikace v Reactu. Delám v AWS Cloudu.

Re:Jak v Reactu řešit null hodnoty na inputu?
« Odpověď #2 kdy: 14. 03. 2024, 14:20:52 »
Dávat do inputu null není dobrý nápad. Obvykle stejně potřebujete mezi frontendem a backendem nějaké mapování (i kvůli jiným datovým typům), v rámci toho se naplní i ty prázdné stringy.

Re:Jak v Reactu řešit null hodnoty na inputu?
« Odpověď #3 kdy: 14. 03. 2024, 14:23:37 »
Citace od: registrovany123 kdy 14. 03. 2024, 14:20:25
Jo ještě se to dá zkrátit jen na tohle, to už je přijatelnější:


<input type="text" value={items[index].hodnota || ""} />

To je ovšem špatně, to by vám třeba místo false nebo 0 vypsalo prázdný string. Správně je:


<input type="text" value={items[index].hodnota ?? ""} />