Is there a way for my child component to know about the parent component's prop types?
I don't want to hardcode them into the child, as the child will be used by multiple parents with slightly different props.
A simplified example:
// Parent.tsx
import React, {ReactElement} from "react";
interface Row {
id: string;
name: string;
tags: string[];
}
const Parent = (): ReactElement => {
const rows: Row[] = [
{
id: "1",
name: "Foo",
tags: ["new"],
},
{
id: "1",
name: "Bar",
tags: ["new", "sale"],
},
];
const formatRow = (row: Row): ReactElement => (
<tr key={row.id}>
<td>{row.id}</td>
<td>{row.name}</td>
<td>{row.tags.map(tag => <strong>{tag}</strong>)}</td>
</tr>
);
return <Child formatRow={formatRow} rows={rows} />;
};
export default Parent;
// Child.tsx
import React, {ReactElement} from "react";
const Child = ({formatRow, rows}): ReactElement => {
const columnCount = Object.keys(rows[0]).length;
return (
<table>
<tbody>
{rows.map(row => formatRow(row))}
</tbody>
<tfoot>
<tr>
<td colSpan={columnCount}>Footer</td>
</tr>
</tfoot>
</table>
);
};
export default Child;
There could then also be another parent, Parent2 with this shape for it's own implementation of Row:
// Parent2.tsx
interface Row {
id: string;
count: number;
}
const Parent2 = (): ReactElement => {
// similar code to `Parent` here
};
export default Parent2;
I'm not sure how to let the Child component know that formatRow expects a Row and returns a ReactElement, and that rows is an array of Row objects?
I think Generics might be the answer, but I have extremely limited knowledge on that, so any help whether Generics or otherwise is appreciated.