Avoid passing children as props JS-0438
Do not pass children as props. Instead, nest children between the opening and closing tags
2import IconButtons from ".";
3
4it("Check for IconButton", async()=>{
5 render(<IconButtons children={undefined} disabled={false} onClick={function (): void { 6 throw new Error("Function not implemented.");
7 } } ></IconButtons>);
8 const MuiElement = screen.getByRole(/button/i);
Description
Children should always be actual children, not passed in as a prop because some components don’t know their children ahead of time. This is especially common for components that represent generic "boxes". This way you can reuse the non-UI functionality between components.
When using JSX, the children should be nested between the opening and closing tags. When not using JSX, the children should be passed as additional arguments to React.createElement.
Bad Practice
// Example 1
<div children='Children' />
// Example 2
<MyComponent children={<AnotherComponent />} />
// Example 3
React.createElement(MyComponent, null,
React.createElement("span", null, "Child 1"),
React.createElement("span", null, "Child 2")
);
// Example 4
React.createElement("div", { children: 'Children' })
Recommended
// Example 1
<div>Children</div>
// Example 2
<MyComponent><AnotherComponent /></MyComponent>
// Example 3
<MyComponent>
<span>Child 1</span>
<span>Child 2</span>
</MyComponent>
// Example 4
React.createElement("div", {}, 'Children')
React.createElement("div", 'Child 1', 'Child 2')