How to correctly build the "composition" of components in the application?

Question

React

The application has 2 levels of users, a regular user and an admin. You need to make a header component in which some information will be the same for everyone, and some - only for admins.

There is a basic header component:

<div class="user-header>
  <img src="logo">
  <div class="user-header__links>"
    ...
  </div>
</div>

The 'user-header__links' contains links, some of which should only be shown to admins. Also, there should still be a dropdown in the header, also available only to administrators.

I see 3 solutions:

1) Make 2 different components, i.e. leave UserHeader, and it will serve for the user, and copy this code into a new component, edit it as needed and get adminHeader by adding the necessary elements and links

2) In UserHeader, make props / slots for passing additional content into it, and then adminHeader will look like something like this :

<UserHeader links={some additional links for admins}>
  <AdminDropdown/>
</UserHeader/>

3) Leave one AppHeader component and stuff elements into it for both users, and for admins and for "admin" elements, just check and if the user is also an admin, then show it.

I understand that in principle all options are working, but somehow it doesn’t work out which option is more convenient and practical. Also, if there are any articles regarding these points, I will be grateful for the links.

Answer 1

Option 1 is not very good, why make up two components if you can get by with one.
2 why something to figure out again with a new component.
3 yes, a good option, I made everything up and, depending on the state, for example, made a check if {state && (<>content>)}
3 option is the most advantageous because you don’t need extra components, you immediately show what you need. Although in some cases, for example, if the check is whether the user is authorized, then you can display different components as in the first case, where the first component is the authorization navigation, and the second is the personal account navigation