Simple react component does not render

Question

I've been trying to figure out why my components will not display at all for the past 5 hours. Any help is greatly appreciated. Here is the source:

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://unpkg.com/react@18/umd/react.production.min.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js" crossorigin></script>
    <script src="modules/Container.js"></script>
    <script src="modules/CategoryFolder.js"></script>
    <script
    src="https://code.jquery.com/jquery-3.6.0.min.js"
    integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
    crossorigin="anonymous"></script>
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <div id="root"></div>
    <script>
        let root = $('#root')[0];
        reactroot = ReactDOM.createRoot(root);
        reactroot.render(React.createElement(Container));
    </script>
</body>
</html>

modules/Container.jsx:

const SPACING = 10;

class Container extends React.Component {
    constructor() {
        super();
        this.state = {categories: []};
    }

    componentDidMount() {
        $.ajax({
            url: './items/categories',
            dataType: 'json',
            async: true,
            success: (categories) => {
                this.setState({categories});
            }
        })
    }

    render() {
            this.state.categories.map((category, i, a)=>{
                <CategoryFolder style={{'z-index':i,top:i*SPACING+'%'}} CategoryTitle={category}></CategoryFolder>
            })
    }
}

modules/CategoryFolder.jsx:

function CategoryFolder(props) {
    let css_class = '';
    let id = Number.parseInt(props.key) + 1;
    if (id % 3 == 0)css_class = 'tert-tag';
    else if (id % 3 == 2) css_class = 'even-tag';

    return (
        <div class="gwd-div-7ybz" name="folder-container">
            <div class={"gwd-div-qb7z " + css_class} name="folder-tag-container">
                <fieldset class="gwd-fieldset-poz5" name="folder-tag-text"><h1 class='category-title'>{props.CategoryTitle}</h1></fieldset>
            </div>
            <svg data-gwd-shape="rectangle" class="gwd-rect-c8gx" name="folder-recipe-body"></svg>
        </div>
    )
}

When I debug all this, the root element is identified and I can see the ajax function succeeding and the render function of Container running. But, for whatever reason, the root element remains untouched as <div id="root"></div> without ever being modified.

Thanks in advance!

Update: I should mention that the console shows no errors at all!

Update 2: The files posted are .jsx while the ones included in index.html are transpiled with npx babel --watch modules/src --out-dir public/modules --presets react-app/prod

Good point, the source I posted is the JSX. I use "npx babel --watch modules/src --out-dir public/modules --presets react-app/prod" to transpile — lakam99, May 15 '22 at 17:42

score 1 · Accepted Answer · answered May 15 '22 at 17:49

1

You don't return <CategoryFolder style={{'z-index':i,top:i*SPACING+'%'}} CategoryTitle={category}></CategoryFolder> in map() function

answered May 15 '22 at 17:49

xijdk

450
4
8

Well observed! That makes it a duplicate of [this](https://stackoverflow.com/questions/45754957/why-doesnt-my-arrow-function-return-a-value), one of many, many such duplicates. Please post comments (and vote to close) rather than posting answers to often-repeated duplicate questions. – T.J. Crowder May 15 '22 at 17:51

Simple react component does not render

1 Answers1