React Js Remove Empty String from array

React Js Remove Empty String from array:To remove empty strings from an array in React.js, you can use the filter() method. This method creates a new array with all elements that pass a certain condition. In this case, the condition is checking if the string is not empty using str !== "".

Another option is to use the reduce() method, which applies a function to each element of the array and accumulates a result. The function checks if the string is not empty and accumulates it into a new array. Lastly, the forEach() method can be used to iterate over each element of the array and remove the empty strings using an if condition.

written

reviewed

updated

How can you remove empty strings from an array in React using the filter method?

The code snippet demonstrates how to remove empty strings from an array using the filter method in ReactJS. The array contains elements such as "Hello", "", "World", "", "React", "", and "". The filter method is applied with a callback function that checks if the element is not an empty string. The resulting filtered array is then displayed in the HTML output, along with the original array.

React Js Remove Empty String from array using filter method

 <script type="text/babel">
        function App() {
            const array = ["Hello", "", "World", "", "React", "", ""];

            const filteredArray = array.filter((element) => element !== "");
            return (
                <div className='container'>
                    <h3>React Js Remove empty string from array</h3>
                    <p>{array.join(',')}</p>
                    <p>{filteredArray.join(',')}</p>
                </div>
            );
        }

        ReactDOM.render(<App />, document.getElementById("app"));
    </script>

Run

Output of React Js Remove Empty String from array

How can you remove empty strings from an array using the `reduce()` method in ReactJS?

This React JS code removes empty strings from an array using the reduce() method. It initializes an array with empty strings and other values. Then, it applies the reduce() method to iterate over each element in the array. If the current element is not an empty string, it adds it to the accumulator array. Finally, it renders the original array and the filtered array without empty strings on the webpage.

React Js Remove Empty String from array using reduce() method

    <script type="text/babel">
        function App() {
            const array = ["", "Hello", "", "World", "", "Google", ""];
            const filteredArray = array.reduce((acc, current) => {
                if (current !== "") {
                    acc.push(current);
                }
                return acc;
            }, []);
            return (
                <div className='container'>
                    <h3>React Js Remove empty string from array using reduce() method</h3>
                    <p>{array.join(',')}</p>
                    <p>{filteredArray.join(',')}</p>
                </div>
            );
        }

        ReactDOM.render(<App />, document.getElementById("app"));
    </script>

Run

How can you remove empty strings from an array in React.js using the `forEach()` method?

The code snippet uses React.js to remove empty strings from an array. It defines a function called App which contains an array with some empty strings. It then iterates over the array using the forEach method and checks if each item is falsy (empty string). If an empty string is found, it removes it from the array using the splice method. Finally, it renders the modified array in a React component.

React Js Remove empty string from array using forEach() Method

    <script type="text/babel">
        function App() {
            const array = ["", "Hello", "", "World", "", "Schools", "Code"];
            array.forEach((item, index) => {
                if (!item) {
                    array.splice(index, 1);
                }
            });
            return (
                <div className='container'>
                    <h3>React Js Remove empty string from array using forEach() Method</h3>
                    <p>{array.join(',')}</p>
                </div>
            );
        }

        ReactDOM.render(<App />, document.getElementById("app"));
    </script>

Run

React JS Tutorial