Как использовать один компонент но с частью данных?

Question

[Влад]

Тут накидал пример - https://stackblitz.com/edit/react-nwxse1?file=src/...

Допустим
<Todos/> - список тудушек, где используется компонент <TodoItem/>
<App/> - страница со списком тудушек <Todos/>
<Header /> - в нем тоже<Todos/> который появляется по наведению на Link2, но тут должна выводится часть инфы, например только заголовки:

Как правильно использовать <TodoItem/> для вывода разного набора данных из одного источника?
Мысль пока только одна, прокидывать данные через <Todos/>.

То есть для страницы будет условно <Todos todosFull="{...}"/>
В шапке меняем <TodoItem/> на <Todos todosShort="{...}"/>, переписать в компоненте <TodoItem/> логику вывода, проверять какой пропс передан и сделать условный рендеринг.

Или как правильно делать?

Answer 1

[0xD34F]

Не надо никаких "частей данных", условного рендеринга и т.д. Вместо общего TodoItem сделайте несколько разных компонентов для отображения элемента списка и передавайте их в Todos, какой где нужен:

const Todos = ({ todos, TodoItem }) => (
  <div className="todos">
    {todos.map(n => (
      <div className="todo-item" key={n.id}>
        <TodoItem todo={n} />
      </div>
    ))}
  </div>
);

const HeaderTodoItem = ({ todo }) => (
  <h3>{todo.title}</h3>
);

const AppTodoItem = ({ todo }) => (
  <>
    <img src={todo.img} alt={todo.title} />
    <div>
      <h3>{todo.title}</h3>
      <p>{todo.text}</p>
    </div>
  </>
);

<Todos todos={todos} TodoItem={HeaderTodoItem} />

<Todos todos={todos} TodoItem={AppTodoItem} />