How to use solid principles in react.js

In JavaScript, the SOLID principles are used to guide the design and implementation of software to make it more maintainable, scalable, and flexible. Here is a brief explanation of each of the SOLID principles in the context of JavaScript: 

 1) Single Responsibility Principle (SRP) - A class should have only one reason to change. This means that a class should have a single responsibility and that responsibility should be encapsulated by the class.

 2) Open/Closed Principle (OCP) - Software entities (classes, modules, functions, etc.) should be open for extension but closed for modification. This means that the behavior of a class can be extended without modifying its source code.

 3) Liskov Substitution Principle (LSP) - Subtypes must be substitutable for their base types. This means that objects of a derived class should be able to replace objects of the base class without affecting the correctness of the program.

 4) Interface Segregation Principle (ISP) - Clients should not be forced to depend on interfaces they do not use. This means that an interface should be designed in such a way that it only includes the methods that are relevant to its clients.

 5) Dependency Inversion Principle (DIP) - High-level modules should not depend on low-level modules. Both should depend on abstractions. This means that the design of a system should favor loose coupling between its components, allowing them to be easily changed or replaced without affecting the rest of the system.

SO how it thay are working with react ->  examples

1) Single Responsibility Principle (SRP) - A React component should have only one responsibility, such as rendering a specific part of the UI. For example, you could have a component that only renders a list of items, and another component that only displays a form.

We'll create two components, one for rendering a list of items, and another for displaying a form to add new items. 

<pre>

  import React, { useContext } from 'react';
import { ItemContext } from './ItemContext';

interface Item {
  id: number;
  name: string;
}

const ItemList: React.FC = () => {
  const { items } = useContext(ItemContext);
  return (
    

      {items.map((item) => (
        
{item.name}
      ))}
    
  );
};

export default ItemList;
  
<pre>