How to hide null values during render in React?-CodePudding

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>
              )}

CodePudding user response：

use :

{status != null && ....

CodePudding user response：

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();

CodePudding user response：

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)
}