2 almost identical components Reactjs-CodePudding

I'm starting to learn ReactJS, theres a way to create a clone component with another classname? eg. A search bar that will appear in two diferente places and with diffent styles, and of course, is too ugly to copy/paste all the code for the new component.

Thanks in advance.

export const Searchbar = () => {
.
.
return (
    <div className="search">
      <input
        type="text"
        placeholder="Search..."
        className="inputSearch"
      />
    </div>
  );
}

And the other one

export const SearchbarPhone = () => {
.
.
return (
    <div className="search">
      <input
        type="text"
        placeholder="Search..."
        className="inputSearchPhone"
      />
    </div>
  );
}

CodePudding user response：

Pass a prop, and set the class name using that prop.

export const Searchbar = ({ inputClass }) => {
.
.
return (
    <div className="search">
      <input
        type="text"
        placeholder="Search..."
        className={inputClass}
      />
    </div>
  );
}

<Searchbar inputClass="inputSearch" />

<Searchbar inputClass="inputSearchPhone" />