1. Компонент
Box, который принимает как
props развернутый объект
box:
type Box = {
name: string;
date: string;
image: string;
};
// можно сразу указать что props будет иметь тип Box, но я так не привык делать
// всегда описываю тип Props для объекта props
type Props = Box;
export default function Box(props: Props) {
const {name, date, image} = props;
}
И передавать в него данные нужно следующим образом:
{data.map((box) => (
<Box
name={box.name}
date={box.date}
image={box.image}
/>
))}
Или можно делать так, но это не везде принято делать, поскольку читаемость понижается (опять-таки все это условно, делай как считаешь нужным):
{data.map((box) => (
// поля объекта box сразу стали полями props
// и про key не забудь внутри цикла map
<Box key={?} {...box} />
))}
2. Компонент
Box, который принимает как
props обычный объект, где
box является вложенным объектом:
type Box = {
name: string;
date: string;
image: string;
}
type Props = {
box: Box;
};
export default function Box(props: Props) {
const {name, date, image} = props.box;
}
и передавать его можно таким способом:
{data.map((box) => (
// объект box передается как props.box
// и про key не забудь внутри цикла map
<Box key={?} box={box} />
))}
В большинстве случаев лучше использовать первый вариант, поскольку так легче использовать
React.memo (если его, конечно, нужно использовать).
