Can we Capitalize or Uppercase the value of props in react?

Question

I want to capitalize my props value, I have tried toUpperCase method but it isn't working

here is my code:

export default function Navbar(props) {

  
  return (
      <>
    <div>
        <nav class="navbar navbar-expand-lg bg-body-tertiary  bg-dark" data-bs-theme="dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="/#">{props.title}</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="/#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/#">{props.about}</a>
        </li>
          
      </ul>
      <form class="d-flex" role="search">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search" />
        <button class="btn btn-outline-light" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>
    </div>
        </>
  )
}

this is a Navbar which I get from bootstrap, now I am giving it's title as prop and I want it to be uppercase but it isn't working, any method except toUpperCase I have tried it but isn't working.

this Is my code of assigning props:

import './App.css';
import Navbar from './Components/Navbar';
import TextForm from './Components/TextForm';


function App() {
  return(
  <>
  <Navbar  title="demo web"  about="About Us"/>
  
  <div className="container my-5">
  <TextForm/>

  </div>
  
  </>
  
  )
  
}

export default App;

this is the component on which I am using it:

export default function Navbar(props) {

  
  return (
      <>
    <div>
        <nav class="navbar navbar-expand-lg bg-body-tertiary  bg-dark" data-bs-theme="dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="/#">{props.title}</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="/#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/#">{props.about}</a>
        </li>
          
      </ul>
      <form class="d-flex" role="search">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search" />
        <button class="btn btn-outline-light" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>
    </div>
        </>
  )
}

or just [toUpperCase() is not making the string upper case](https://stackoverflow.com/questions/15326582/touppercase-is-not-making-the-string-upper-case) or [Javascript toUpperCase() method](https://stackoverflow.com/questions/66305331/javascript-touppercase-method#:~:text=toUpperCase()%20method%20is%20a,you%20need%20to%20reassign%20it.)if you're looking to just make the string all caps — pilchard, Mar 31 '23 at 21:50
`toUpperCase` doesn't appear in any of your code samples where did you 'try it'? But you're passing a string literal so just `title="DEMO WEB"`? — pilchard, Mar 31 '23 at 21:51

score 1 · Accepted Answer · answered Mar 31 '23 at 21:41

Append `.toUpperCase()` to the string expression

export default function Navbar(props) {

  
  return (
      <>
    <div>
        <nav class="navbar navbar-expand-lg bg-body-tertiary  bg-dark" data-bs-theme="dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="/#">{props.title.toUpperCase()}</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="/#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/#">{props.about.toUpperCase()}</a>
        </li>
          
      </ul>
      <form class="d-flex" role="search">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search" />
        <button class="btn btn-outline-light" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>
    </div>
        </>
  )
}

Can we Capitalize or Uppercase the value of props in react?

1 Answers1

Append .toUpperCase() to the string expression

Append `.toUpperCase()` to the string expression