How to leave the contents of a React component alone

React.js has a component-based architecture which means that the code can be divided into smaller modules and catered separately. These components can be composed together and manipulated each other according to the requirements. This helps to break down complex problems into simpler problems.

Example

This a simple Header component that contains the content specified to it. Whenever <Header /> is called in the parent component, the contents inside it will be displayed on the screen.

const Header = () => {
    return (
        <div>
           <h1>This is a header component</h1>
           <p>Hello! Hope you get to learn something nice today</p>
        </div>
    )
}
export default Header;

Leave the contents of Header component alone

Leaving the contents of the component alone means not allowing the content of the component to modify on runtime. This is practiced when a component is required to have its own interface without rendering and modification by other components.

Key factors to consider when creating a component whose contents are to be left alone:

  • Use logical components in its own scope: The component can still have component logic but in its own scope. For example, if we want to show an alert message when a button is clicked inside a component, we can write a handleChange function inside the functional Header component.

const Header = () => {
    const handleChange = (e) => {
        alert("You have logged in successfully");
    };
    return (
        <div>
           <h1>This is a header component</h1>
           <p>Hello! Hope you get to learn something nice today</p>
           <button onClick = {handleChange}>Log In</button>
        </div>
    )
}
export default Header;

  • Do not accept parameters: The components cannot accept parameters from other components that can modify their content. The component should be independent and be able to display its own content without taking help from other components.

Parameter brackets of the Header component.
Parameter brackets of the Header component.

  • Create return functions without external rendering: The components can have return functions with parameters inside them but they should not be dependent on other components to provide a correct return answer. Moreover, the parameters should be sent from the component's own attributes.

import React from "react";
const Header = () => {
  function display(name)
  {
    return "Welcome to " + name;
  }
    
  //you can take the function parameter as a runtime input too
  return (
    <div>
      <h1>This is a header component</h1>
      <h4>{display("Educative")}</h4>
    </div>
  )
}
export default Header;

Summary

To leave the content of a component, it is important to ensure that no other component is rendering its content. This is mostly used to improve the reusability of the component. Therefore, it is vital to keep its content independent from the other components.

Test your understanding

Q
const Header = ({title , update}) => {
return (
  <div>
   <h1>{title}</h1>
   <button onClick = {update}> Update Content</button>
  </div>
)}
export default Header;

Header component takes title and update function as parameters from another component and use them to manipulate its content. What type of component Header is?

A)

A component whose content is left alone.

B)

A component whose content is manipulated.

Free Resources

Copyright ©2026 Educative, Inc. All rights reserved