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

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:

Kód: [Vybrat]
<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.
« Poslední změna: 14. 03. 2024, 14:06:40 od registrovany123 »


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ší:

Kód: [Vybrat]
<input type="text" value={items[index].hodnota || ""} />

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 »
Jo ještě se to dá zkrátit jen na tohle, to už je přijatelnější:

Kód: [Vybrat]
<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:

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