How to remove 'null' from an array?-CodePudding

I receive a response from the backend that gives me an array of language, which one is default, but the two other languages comes with different varibales.(Also need to split them in order to take the language string)

  useEffect(() => {
    axios
      .get('api')
      .then((response) => {
        console.log(response.data);
        setLanguage([...language, response.data.data.LANGUAGE1_NAME.split("-")[1], response?.data?.data?.LANGUAGE2_NAME == undefined ? 'null' : response.data.data.LANGUAGE2_NAME.split("-")[1], response?.data?.data?.LANGUAGE3_NAME == undefined ? 'null' : response.data.data.LANGUAGE3_NAME.split("-")[1]])
      })
      .catch((error) => {
        console.log(error);
      });
  }, []);

So when I pass the the language to the child component, in one scenario I might pass it like this language["English", "null", "null"]. So in the child component, I display them in an input, and what I'm trying to do is to remove the "null" from the list. I tried this

<div>
  <input
     type="text"
     value={language == 'null' ? language.pop() : language}
     onChange={(event) => handleItemChanged(event, i)}
     placeholder="Language"
  />
</div>

but it doesn't work.

How can I remove the "null" from the array ?

CodePudding user response：

There are a couple of ways to achieve this:

let array = [0, 1, null, 2, 3];

function removeNull(array) {
    return array.filter(x => x !== null)
};

Other way:

const filteredArray = [1, null, undefined, 2].filter(Boolean);

CodePudding user response：

The fact that there null is a string, you can filter your array and remove the values:

language = language.filter(element => element !== 'null')

CodePudding user response：

language = language.filter(item => item !== "null" )

CodePudding user response：

Another way:

let a = [1,2,4,6,null,'A',undefined,'B'].filter(x => !x===false);

Here, it will remove undefined as well.

Or even:

let a = [1,2,4,6,null,'A',undefined,'B'].filter(x => x);