I have this API endpoint:
GET https://xxx/xx
Result:
{
"name": "Ana",
"status": null,
}
I render the API result inside a blank page in my App and the page contains the following:
Ana
null
I want to hide null values.I don't want 'null' to be shown at all. How can I achieve this in React/Javascript?
{name && (
<span>
{name}
<br />
</span>
)}
{status && (
<span>
{status}
</span>
)}
your code should work fine , I think you need to convert your api response to json.
Exemple
const response = await fetch(URL);
const jsonResponse = await response.json();
This is correct from what you have told me in the comments I think that you have some default value set for the response that status is a string. Please verify it.
const [status, setStatus] = useState<string | null>(null);
{status && (
<span>
{status}
</span>
)}
when you are setting it with setStatus make sure that the value is not null like this
if (response.data.status) {
setStatus(response.data.status)
}