How to Trim White Spaces from input in ReactJS?

We will learn to trim white spaces from the input in ReactJS. Sometimes, users add unnecessary space at the start or end of the input by mistake. So, as a developer, we need to check if the input string contains the white space at the start or end.

If we find white spaces in the input, we should trim it; Otherwise, it can cause issues. For example, we need to store the email in the database, and while registering the email, the user has also added the white spaces by mistake, and we stored the email in the database with white spaces. When a user comes to our application again to log in with the same email, it will give a credential not matching error.

So, we need to store data after trimming the white spaces to avoid errors.

Using trim() Method (Recommended)

The trim() method is the standard JavaScript approach to remove whitespace from both ends of a string. It's simple, reliable, and widely supported.

Syntax

let trimmedString = string.trim();

The trim() method returns a new string with whitespace removed from both ends. It doesn't modify the original string.

Example

In this example, we create a React component that trims whitespace from user input. The trimming happens when the user clicks the submit button.

import React, { useState } from "react";

const App = () => {
  const [inputString, setInputString] = useState("");
  const [trimmedString, setTrimmedString] = useState("");

  function handleInputChange(event) {
    setInputString(event.target.value);
  }

  function handleSubmit() {
    const trimmed = inputString.trim();
    setTrimmedString(trimmed);
  }

  return (
    <div style={{ padding: "20px" }}>
      <h3>Trim Whitespace from Input</h3>
      
      <div>
        <label>Enter text with spaces: </label>
        <input 
          type="text" 
          value={inputString} 
          onChange={handleInputChange}
          placeholder="  Try typing with spaces  "
          style={{ padding: "8px", marginLeft: "10px" }}
        />
      </div>
      
      <button 
        onClick={handleSubmit}
        style={{ 
          marginTop: "10px", 
          padding: "8px 16px",
          backgroundColor: "#007bff",
          color: "white",
          border: "none",
          borderRadius: "4px"
        }}
      >
        Trim Whitespace
      </button>
      
      {trimmedString && (
        <div style={{ marginTop: "15px" }}>
          <p><strong>Original:</strong> "{inputString}"</p>
          <p><strong>Trimmed:</strong> "{trimmedString}"</p>
          <p><strong>Length before:</strong> {inputString.length}</p>
          <p><strong>Length after:</strong> {trimmedString.length}</p>
        </div>
      )}
    </div>
  );
};

export default App;

Real-time Trimming

For better user experience, you might want to trim whitespace in real-time as the user types:

import React, { useState } from "react";

const RealTimeTrimExample = () => {
  const [email, setEmail] = useState("");

  function handleEmailChange(event) {
    // Trim whitespace automatically
    const trimmedValue = event.target.value.trim();
    setEmail(trimmedValue);
  }

  return (
    <div style={{ padding: "20px" }}>
      <h3>Email Input (Auto-trimmed)</h3>
      
      <input
        type="email"
        value={email}
        onChange={handleEmailChange}
        placeholder="Enter your email"
        style={{ 
          padding: "10px", 
          width: "300px",
          border: "1px solid #ccc",
          borderRadius: "4px"
        }}
      />
      
      <p>Current email: "{email}"</p>
      <p>Length: {email.length}</p>
    </div>
  );
};

export default RealTimeTrimExample;

Custom Algorithm Approach

While trim() is recommended, understanding how trimming works internally can be educational. Here's a custom implementation:

function customTrim(str) {
  // Split by spaces and filter out empty strings from start/end
  let words = str.split(' ');
  
  // Remove empty strings from beginning
  while (words.length > 0 && words[0] === '') {
    words.shift();
  }
  
  // Remove empty strings from end  
  while (words.length > 0 && words[words.length - 1] === '') {
    words.pop();
  }
  
  return words.join(' ');
}

// Usage in React component
const CustomTrimExample = () => {
  const [input, setInput] = useState("");
  const [result, setResult] = useState("");

  function handleSubmit() {
    const trimmed = customTrim(input);
    setResult(trimmed);
  }

  return (
    <div style={{ padding: "20px" }}>
      <h3>Custom Trim Algorithm</h3>
      <input
        type="text"
        value={input}
        onChange={(e) => setInput(e.target.value)}
        placeholder="Enter text with spaces"
      />
      <button onClick={handleSubmit}>Custom Trim</button>
      {result && <p>Result: "{result}"</p>}
    </div>
  );
};

Comparison

Common Use Cases

• Form validation: Trim user inputs before validation
• Email processing: Remove accidental spaces from email addresses
• Search functionality: Clean search queries
• Database storage: Ensure clean data before saving

Conclusion

Use JavaScript's built-in trim() method for removing whitespace from React inputs. It's reliable, performant, and handles all edge cases. Apply trimming either on form submission or in real-time based on your UX requirements.