Convert all characters to lowercase in React js

Convert all the characters in a string to lowercase in React js

Posted by Raquel Crist on July 12, 2022

Convert all characters to lowercase in React js

Convert all the characters in a string to lowercase in React js

Posted by Raquel Crist on July 12, 2022

To convert all characters in a string to lowercase in React:

  • Use the toLowerCase method.
  • Use a reusable method or function to convert more than one string
  • Or use it directly if your planning to use it once

In a function component:

function App() {
  const lowerCase = "All lOwEr caSe";

  const allLowerCase = (str) => {
    return str.toLowerCase();
  };

  return (
      <div>{allLowerCase(lowerCase)}</div>
  );
}

export default App;

In a class component:

export default class App extends Component {

    allLowerCase = (str) => {
        return str.toLowerCase();
    };

    render() {

        const lowerCase = "All lOwEr caSe";

        return (
           <div>{this.allLowerCase(lowerCase)}</div>
        )
    }
}

Do it without using the allLowerCase method:

function App() {
  const lowerCase = "All lOwEr caSe";

  return (
      <div>{lowerCase.toLowerCase()}</div>
  );
}

export default App;

Hope this was helpful.