How to override existing React components

React.js has a component-based architecture that offers a flexible environment for overriding its existing components. It improves the code reusability and provides customization margins by adopting a modular approach to development.

What is overriding?

Overriding is a basic OOP concept in which we can alter the functionality of an existing child class in its parent class. In React, we can define a different implementation for existing components in their parent components.

Overriding existing components

As discussed above, React application modules can be divided into different components to improve reusability. Therefore, to use the existing components we override them. There are three basic approaches that can be used to override existing components in React.

  1. Composition

  2. Inheritance

  3. High-order components

Let's add a simple button inside a navbar using each approach one by one.

Composition

Composition is mainly explained in the context of a 'has-a' relation, where a component is contained by another component. Each component has its own encapsulated behavior and interacts with each other through the reference specified for one component in the other component.

Note: Real life example of a 'has-a' relation can be of a car. Car has a seat or an engine. Seat and engine are small individually useful components that come together to form a Car component.

Example

.nav{
  background-color: cadetblue;
  align-items: center;
  text-align: center;
  padding: 10px;
}

.btn{
  background-color: rgb(30, 68, 90);
  border: solid rgb(30, 68, 90);
  color: aliceblue;
  border-radius: 10px;
  margin-top: 30px;
  margin-bottom: 25px;
  margin-left: 30px;
  padding: 0.3rem 0.5rem;
}

h1{
  color: rgb(255, 255, 255);
  font-size:xx-large;
  font-weight: bolder;
  align-self: center;
}
Overriding component using composition.

Code explanation

Navbar.js:

  • Line 2: Import Button component to the Navbar component.

  • Line 10: Button is overridden inside the Navbar function.

index.js:

  • Line 10: Import and render Navbar in the root to see the output on your screen.

Inheritance

Inheritance is a hierarchal relationship between components, where the child component can inherit properties of its parent component. The child component can use the parent component properties according to its requirements.

Example

.nav{
  background-color: cadetblue;
  align-items: center;
  text-align: center;
  padding: 10px;
}

.btn{
  background-color: rgb(30, 68, 90);
  border: solid rgb(30, 68, 90);
  color: aliceblue;
  border-radius: 10px;
  margin-top: 30px;
  margin-bottom: 25px;
  margin-left: 30px;
  padding: 0.3rem 0.5rem;
}

h1{
  color: rgb(255, 255, 255);
  font-size:xx-large;
  font-weight: bolder;
  align-self: center;
}
Overriding component using inheritance.

Code explanation

Navbar.js:

  • Line 2: Import Button component to the Navbar component.

  • Line 4: Navbar is the overridden child component that extends Button, which is the parent component, to inherit its properties.

  • Line 5: Use render() method whenever a component has to be re-rendered.

  • Line 9: Use super.render() to call the render function of Button , which is the parent component.

index.js:

  • Line 10: Import and render Navbar in the root to see the output on your screen.

High-order components

High-order component is a function that takes Component as a parameter and returns it after incorporating new behavior. It can add additional functionalities to the wrapped component including state management, event handling, and prop manipulation.

Example

import React from 'react';
import Navbar from "./Navbar";
import Button from './Button';

const MyNav = Navbar(Button);

const Base = () => {
    return(
        <div>
            <MyNav/>
        </div>
    )
}

export default Base;
Overriding component using high order components.

Code explanation

Base.js:

  • Line 5: Declare the overridden component myNav and set it equal to the original component Button inside the Navbar wrapper function.

  • Line 4: Call the overridden component myNav that displays the original and overridden content.

Navbar.js:

  • Line 3: Pass a Component to the high-order component Navbar.

  • Line 4: Implement the myNav functional component in which the overriding will occur. It will return the re-rendered content to the Base component.

  • Line 8: Component is called which is a built-in attribute that represents the component that is to be rendered (see Base.js explanation for further clarification).

  • Line 12: Return the rendered myNav component that contains the original and overridden content.

index.js:

  • Line 10: Import and render Base in the root to see the output on your screen.

Summary

Overriding approach

How it works

Composition

Import the component to be overridden inside the other component and call it inside the div where it is to be rendered.

Inheritence

The child class component inherits the properties of the parent class component and calls super.render() to render its content.

High order componenets

The built-in component that represents the component to be rendered is passed to the higher-order component.

Common query

Question

Can inheritance be done using functions instead of classes in React?

Show Answer

Free Resources

Copyright ©2026 Educative, Inc. All rights reserved