I am trying to give a default title to the react js web application but it is not taking the default value. This below is App.js where i was giving the value of title before adding a default prop and it was working fine. After i added the default prop, it is not updating on my screen in browser. showing blank for the title only. App.js:

import './App.css';
import Footer from "./MyComponents/Footer";
import Header from "./MyComponents/Header";
import Todos from "./MyComponents/Todos";

function App() {
  
  return (
      <><Header searchbar = {true}/><Todos/><Footer /></>
  
  );
}

export default App;

This is header.js i have been using. I have used some demo bootstrap code and following a tutorial.

Header.js

import PropTypes from 'prop-types';
import React from 'react';

export default function Header(props) {
  return (
    <div>
      <nav className="navbar navbar-expand-lg bg-body-tertiary">
  <div className="container-fluid">
    <a className="navbar-brand" href="#">{props.title}</a>
    <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span className="navbar-toggler-icon"></span>
    </button>
    <div className="collapse navbar-collapse" id="navbarSupportedContent">
      <ul className="navbar-nav me-auto mb-2 mb-lg-0">
        <li className="nav-item">
          <a className="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li className="nav-item">
          <a className="nav-link" href="#">About</a>
        </li>
      </ul>
      {props.searchbar?<form className="d-flex" role="search">
        <input className="form-control me-2" type="search" placeholder="Search" aria-label="Search"/>
        <button className="btn btn-outline-success" type="submit">Search</button>
      </form>: "No Search Bar"}
      {/* {props.searchbar?<form className="d-flex" role="search">
        <input className="form-control me-2" type="search" placeholder="Search" aria-label="Search"/>
        <button className="btn btn-outline-success" type="submit">Search</button>
      </form>: "NO Search Bar"} */}
    </div>
  </div>
</nav>
    </div>
  )
}

Header.defaultProps = {
  title: "Your Title is this"
}

Header.propTypes = {
  title: PropTypes.string
}

In this package.json i have react 19. I am following tutorial in which he have used an older version.

Package.json:

{
  "name": "todolist",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "bootstrap": "^5.3.3",
    "cra-template": "1.2.0",
    "react": "^19.0.0",
    "react-bootstrap": "^2.10.9",
    "react-dom": "^19.0.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^1.1.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

I have tried adding an undefined value but passing the title such as title: {undefined} but it did not work out

I am trying to give a default title to the react js web application but it is not taking the default value. This below is App.js where i was giving the value of title before adding a default prop and it was working fine. After i added the default prop, it is not updating on my screen in browser. showing blank for the title only. App.js:

import './App.css';
import Footer from "./MyComponents/Footer";
import Header from "./MyComponents/Header";
import Todos from "./MyComponents/Todos";

function App() {
  
  return (
      <><Header searchbar = {true}/><Todos/><Footer /></>
  
  );
}

export default App;

This is header.js i have been using. I have used some demo bootstrap code and following a tutorial.

Header.js

import PropTypes from 'prop-types';
import React from 'react';

export default function Header(props) {
  return (
    <div>
      <nav className="navbar navbar-expand-lg bg-body-tertiary">
  <div className="container-fluid">
    <a className="navbar-brand" href="#">{props.title}</a>
    <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span className="navbar-toggler-icon"></span>
    </button>
    <div className="collapse navbar-collapse" id="navbarSupportedContent">
      <ul className="navbar-nav me-auto mb-2 mb-lg-0">
        <li className="nav-item">
          <a className="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li className="nav-item">
          <a className="nav-link" href="#">About</a>
        </li>
      </ul>
      {props.searchbar?<form className="d-flex" role="search">
        <input className="form-control me-2" type="search" placeholder="Search" aria-label="Search"/>
        <button className="btn btn-outline-success" type="submit">Search</button>
      </form>: "No Search Bar"}
      {/* {props.searchbar?<form className="d-flex" role="search">
        <input className="form-control me-2" type="search" placeholder="Search" aria-label="Search"/>
        <button className="btn btn-outline-success" type="submit">Search</button>
      </form>: "NO Search Bar"} */}
    </div>
  </div>
</nav>
    </div>
  )
}

Header.defaultProps = {
  title: "Your Title is this"
}

Header.propTypes = {
  title: PropTypes.string
}

In this package.json i have react 19. I am following tutorial in which he have used an older version.

Package.json:

{
  "name": "todolist",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "bootstrap": "^5.3.3",
    "cra-template": "1.2.0",
    "react": "^19.0.0",
    "react-bootstrap": "^2.10.9",
    "react-dom": "^19.0.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^1.1.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

I have tried adding an undefined value but passing the title such as title: {undefined} but it did not work out

• javascript
• reactjs
• jsx
• react-props
• react-proptypes

1 Answer 1

Using defaultProps is deprecated, and it's better to destructure the props and define default values the ES6 way, for example:

const Header = ({ title = 'Default title' }) => (
  <div>
    {/* Rest of the code */}
    <div>{title}</div>
  </div>
);

export default Header;

I would also strongly advise you to start using TypeScript as it helps out tremendously. As for why it's not working the way that it is, make sure the app is actually refreshed, you're looking at the right component and that title isn't explicitly set somewhere.

Here's a quick CodeSandbox: https://codesandbox.io/p/sandbox/nrkxfd