Should I create new component or render js conditionaly?

Question

I have a case where I need to render one react component again in a different place. So, for example, I have an index component where I have a list of users and filters for this list. Now I need to render this component in a different place but without filters. Should I create a new almost the same index component and skip rendering filters or should I pass prop and render conditional JSX?

const Index = ({ renderFilters }) => {
  ... some code
  return (
    <>
      ...some jsx code
      { renderFilters ? <Filters /> : null }
      <UserList>
      ...some jsx code
    </>
  )
}

or just copy-paste the index component and

const IndexWithouFilters = () => {
  ... some code
  return (
    <>
      ...some jsx code
      <UserList>
      ...some jsx code
    </>
  )
}

Of course, this is only an example and I have a case where have to render conditionally more than one components.

Answer 1

It is a best practice in Reactjs to reuse components.So go with former approach.