Im trying to create an array to store my category links and then display them however I'm getting nothing displaying in my DOM. Any help would be appreciated :)

import React from react;

import { SidebarCategory } from './SidebarCategory';



class SidebarCategories extends React.Component {

    constructor() {

        super();

        this.state = {

            categories: []

        }

    }



    componentWillMount() {

        this.setState({categories: [

            {

                id: 1,

                icon: icon,

                title: Home,

            },

            {

                id: 2,

                icon: icon,

                title: Gallery,

            }

        ]});

    }



    render() {

        return (

            <ul className=sidebar__categories container-fluid>

                {this.state.categories.map(category => {

                    return (

                        <SidebarCategory key={category.id} title={category.title} />

                    )

                })};

            </ul>

        );

    }

}



export default SidebarCategories;

edit:

console error:

bundle.js:357 Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in. Check the render method of Sidebar.
in Sidebar (created by App)
in div (created by App)
in App

sidebarCategory.js

import React from react;



export class SidebarCategory extends React.Component {

    render() {

        const SidebarCategory = ({ title }) => {

          return (<div className=sidebarCategory>{title}</div>);

        }

    }

}

sidebar.js:

import React from react;



import { SidebarCategories } from ./SidebarCategories;



export class Sidebar extends React.Component {

    render() {

        return (

            <div className=sidebar col-sm-2>

                <div className=row>

                    <div className=sidebar__header col>

                        <img alt=Logo className=img-fluid sidebar__header__logo src=../resources/img/logo-white.png />

                        {'u00A0'} <h4 className=i-block>Title</h4>

                    </div>

                </div>

                <div className=row>

                    <div className=sidebar__user container-fluid>

                        <div className=row>

                            <div className=col-sm-4>

                                <img alt=User DP className=sidebar__user__img img-fluid rounded-circle src=http://via.placeholder.com/100x100 />

                            </div>

                            <div className=col-sm-8>

                                <p><strong>Welcome</strong><br />

                                Mark Hughes</p>

                            </div>

                        </div>

                    </div>

                </div>

                <div className=row>

                    <SidebarCategories />

                </div>

            </div>

        );

    }

}

index.js:

import React from react;

import { render } from react-dom;



import Sidebar from ./components/sidebar;

import Content from ./components/content;



class App extends React.Component {

    render() {

        return (

            <div className=row>

                <Sidebar />

                <Content />

            </div>

        );

    }

}



render(<App className=container-fluid/>, window.document.getElementById(app));