I am trying to create a table ponent where the ponent will serve some special className to its specific children.
const BasicTable = ({ children }) => {
const RenderChild = Children.map(children, (el) => {
const child = el;
if (child !== null) {
if (child.props.originalType !== "th") {
return <child.type {...child.props} className="th" />;
}
return <child.type {...child.props} />;
}
return null;
});
return (
<div className="table-responsive">
<table className="table w-full bg-transparent">{RenderChild}</table>
</div>
);
};
This is my ponent and I want to use it like this.
<BasicTable>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Position</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>dsfa</td>
<td>dsfa</td>
<td>dsfa</td>
<td>dsfa</td>
</tr>
</tbody>
</BasicTable>
But here the problem is my Children.map function only loop through its immediate children. How do I pass props to its nested child (th, td, ...etc)
I am trying to create a table ponent where the ponent will serve some special className to its specific children.
const BasicTable = ({ children }) => {
const RenderChild = Children.map(children, (el) => {
const child = el;
if (child !== null) {
if (child.props.originalType !== "th") {
return <child.type {...child.props} className="th" />;
}
return <child.type {...child.props} />;
}
return null;
});
return (
<div className="table-responsive">
<table className="table w-full bg-transparent">{RenderChild}</table>
</div>
);
};
This is my ponent and I want to use it like this.
<BasicTable>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Position</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>dsfa</td>
<td>dsfa</td>
<td>dsfa</td>
<td>dsfa</td>
</tr>
</tbody>
</BasicTable>
But here the problem is my Children.map function only loop through its immediate children. How do I pass props to its nested child (th, td, ...etc)
Share Improve this question edited Jan 12, 2022 at 5:59 Amila Senadheera 13.2k16 gold badges29 silver badges46 bronze badges asked Jan 12, 2022 at 4:42 Hasan MobarakHasan Mobarak 1931 gold badge2 silver badges13 bronze badges 1- 1 think you have to do a check if child ponent is having its children and do operation you want to. eg if you are iterating over thead, check if thead had children and if it had you can perform the action you need – J-007 Commented Jan 12, 2022 at 5:10
2 Answers
Reset to default 8You can provide children prop after applying the classNames to the current child. You can define another function to apply custom class names as per your needs (The logic can be changed as per your needs).
This would also work.
import { Children, isValidElement } from "react";
const BasicTable = ({ children }) => {
const RenderChild = (children) => {
return Children.map(children, (child) => {
if (isValidElement(child)) {
return (
<child.type
{...child.props}
children={RenderChild(child.props.children)}
className={resolveCalssName(child.type)}
/>
);
}
// non react elements (text inside the table ...etc)
return child;
});
};
const resolveCalssName = (type) => {
switch (type) {
case "thead":
return "custom-thead-class-name";
case "tbody":
return "custom-tbody-class-name";
case "tr":
return "custom-tr-class-name";
case "th":
return "custom-th-class-name";
case "td":
return "custom-td-class-name";
default:
return "";
}
};
return (
<div className="table-responsive">
<table className="table w-full bg-transparent">
{RenderChild(children)}
</table>
</div>
);
};
Code sandbox
You can define a recursive function to iterate over all the children until thi child is null or is of type string or any other condition based on your requirement, here is an example:
const BasicTable = ({ children }) => {
const iterateOverChildren = (children) => {
return React.Children.map(children, (child) => {
// equal to (if (child == null || typeof child == 'string'))
if (!React.isValidElement(child)) return child;
return React.cloneElement(child, {
...child.props,
// you can alse read child original className by child.props.className
className: child.type == 'th' ? 'th' : '',
children: iterateOverChildren(child.props.children)})
})
};
return (
<div className="table-responsive">
<table className="table w-full bg-transparent">
{iterateOverChildren(children)}
</table>
</div>
);
};
function App() {
return (
<BasicTable>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Position</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>dsfa</td>
<td>dsfa</td>
<td>dsfa</td>
<td>dsfa</td>
</tr>
</tbody>
</BasicTable>
);
}
ReactDOM.render(<App/>, document.getElementById('root')).th{
color: green;
}<script src="https://cdnjs.cloudflare./ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="root"></div>