Passing Children to Components in Fortis

Handling children elements within your Fortis components is a crucial aspect of building flexible and dynamic user interfaces. The approach for dealing with children elements varies between function components and class (web) components. In this article, we'll explore how to work with children elements in both types of components, provide fallback content, and incorporate named slots for more advanced use cases.

Function Components: Using the `children` Prop

In Fortis function components, you can access and manipulate children elements using the regular children prop. This prop represents the child elements passed to your component and allows you to render them as needed.

Here's an example of a Fortis function component that uses the children prop:

import {FunctionComponent} from 'fortis';
 
const FunctionComponentWithChildren: FunctionComponent = ({children}) => {
    return (
        <div>
            <h2>Function Component</h2>
            {children}
        </div>
    );
};

To use this function component and pass children to it, you can do the following:

document.body.appendChild(
    <FunctionComponentWithChildren>
        <p>This is a child element.</p>
    </FunctionComponentWithChildren>
);

In this example, the <FunctionComponentWithChildren> component renders the child element This is a child element. within its structure.

Class (Web) Components: Using Slot Elements

In class components (web components) in Fortis, handling children elements involves using slot elements. The recommended way to include children in a class component is to insert this.props.children directly into the JSX code.

Here's an example of a class component using this.props.children:

import {Component} from 'fortis';
 
class ClassComponentWithChildren extends Component({
    // Prop definitions here
}) {
    render() {
        return (
            <div>
                <h2>Class Component</h2>
                {this.props.children}
            </div>
        );
    }
}

To use this class component and pass children to it, you can do the following:

document.body.appendChild(
    <ClassComponentWithChildren>
        <p>This is a child element.</p>
    </ClassComponentWithChildren>
);

In this example, the <ClassComponentWithChildren> component renders the child element This is a child element. within its structure.

Providing Fallback Content

It's common to provide fallback content when no children are supplied to a component. This can be achieved using the <slot> element within your Fortis class component. The <slot> element serves as the placeholder for children and, when no children are provided, it displays the fallback content.

Here's an example of a class component with a slot element and fallback content:

import {Component} from 'fortis';
 
class ClassComponentWithSlot extends Component({
    // Prop definitions here
}) {
    render() {
        return (
            <div>
                <h2>Class Component with Slot</h2>
                <slot>
                    <p>This is the fallback content.</p>
                </slot>
            </div>
        );
    }
}

To use this class component with a slot element and fallback content, you can do the following:

document.body.appendChild(
    <ClassComponentWithSlot>
        {/* No children provided */}
    </ClassComponentWithSlot>
);

In this example, the <ClassComponentWithSlot> component renders the fallback content This is the fallback content. when no children are supplied.

Using Named Slots

For more advanced use cases, Fortis allows you to utilize named slots within your class components. Named slots enable you to define specific slots for different types of children content.

Here's an example of a class component with named slots:

import {Component} from 'fortis';
 
class ClassComponentWithNamedSlots extends Component({
    // Prop definitions here
}) {
    render() {
        return (
            <div>
                <h2>Class Component with Named Slots</h2>
                <slot name="header">
                    <p>This is the header fallback content.</p>
                </slot>
                <slot name="main">
                    <p>This is the main content fallback.</p>
                </slot>
            </div>
        );
    }
}

To use this class component with named slots, you can do the following:

document.body.appendChild(
    <ClassComponentWithNamedSlots>
        <div slot="header">
            <h1>This is the header content.</h1>
        </div>
        <div slot="main">
            <p>This is the main content.</p>
        </div>
    </ClassComponentWithNamedSlots>
);

In this example, the <ClassComponentWithNamedSlots> component has two named slots, "header" and "main." You can insert content into these named slots by using the slot attribute, as demonstrated in the instantiation of the component.

Conclusion

Passing and manipulating children elements in Fortis is essential for building dynamic and flexible user interfaces. Function components use the children prop, while class components (web components) employ slot elements to include children. The recommended approach is to insert this.props.children directly into the JSX code for class components. However, you can also utilize advanced slot features by manually configuring slot elements, specifying names, and providing fallback content when necessary. With these techniques, you can create versatile and customizable components in Fortis, tailored to your specific UI needs.

Interoperability Property Attributes