React child Component in parent Component

Question

Trying to make something maybe different, but maybe not at all.
Creating a view, where is different components and in these, have also components for page sections and also in these have several other smaller components (like buttons etc.) And I getting error in Chrome console, when I have Component in Component style

Section(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.

How it looks:

import { Component, ReactNode } from "react";
import Section from "../../../components/Section/Section";
import Button from "../../../components/Button/Button";

class About extends Component{
    render(): ReactNode {
        return (
            <Section theme="dark" title="About">
                About content
                <div className="about-content">
                    <p>Lorem ipsum dolor sit amet...</p>

                    <Button theme="primary">Contact us</Button>
                </div>
            </Section>
        );
    }
}

export default About;

When I disabling <Button> everything was working fine

And the <Section> component:

import React from "react";
import "./themes.scss";

interface SecProps {
    title?: string;
    smalltext?: string;
    theme?: string; // dark, light, purple, gray
}

class Section extends React.Component<SecProps>{
    constructor(props: any) {
        super(props);

        this.state = {
            title: "",
            smalltext: "",
            theme: ""
        };
    }

    private sectionTheme(): string | undefined {
        switch (this.props.theme) {
            case "dark":
                return "black";
            case "light":
                return "lightgray";
            case "purple":
            case "gray":
                return this.props.theme;
            default:
                return "";
        }
    }

    public render() {
        return(
            <section className={this.sectionTheme()}>
                <div className="container">
                    <div className="sect-head">
                        {(this.props.title) ? <h2>{this.props.title}</h2> : ""}
                        {(this.props.smalltext) ? <small>{this.props.smalltext}</small> : ""}
                    </div>

                    <div className="sect-content">
                        {this.props.children}
                    </div>
                </div>
            </section>
        );
    }
}

export default Section; 

And also <Button> component:

import React from "react";

interface BtnProps{
    type?: string;  // button, link 
    theme?: string; // primary, outline
    url?: string;
    onClick?: React.MouseEventHandler<HTMLButtonElement>;
}

class Section extends React.Component<BtnProps>{
    constructor(props: any){
        super(props);

        this.state = {
            type: "button",
            theme: "",
            url: "#"
        };
    }

    render() {
        const btn = this.props;

        if(btn.type === "button"){
            return(
                <button 
                  className={this.buttonClass()}
                  onClick={this.props.onClick}
                  >
                    {btn.children}
                </button>
            )
        }else if(btn.type === "link"){
            return(
                <a 
                  href={btn.url}
                  className={this.buttonClass()}
                  >
                    {btn.children}
                </a>
            )
        }
    }

    private buttonClass() : string | undefined {
        switch(this.props.theme){
            case "primary":
                return "primary";
            case "outline":
                return "outline";
            default:
                return "";
        }
    }
}

export default Section; 

Yes, Im new one in React, and starting with something and cant find any correct answers to this

Answer 1

The problem is quite clear: The Button component does not return anything when the conditions do not match.

You just need to add a simple return null at the end of the render method for Button:

render() {
    const btn = this.props;

    ...

    return null;
    
}

Another option is to add one of the missing props to the Button when you use it:

<Button theme="primary" type="button">Contact us</Button>

or

<Button theme="primary" type="link">Contact us</Button>

In either case, I recommend you keep the return null inside the render method.