Create a list from Array React JS

At the moment you're not iterating over your categories you have held in state, so the first thing is to map over them and provide your sub-component <SidebarCategory> the data it needs; a key from the category id, and the title.

render() {
  return (
    <ul className = "sidebar__categories container-fluid">
    {this.state.categories.map(category => {
      return (
        <SidebarCategory
          key={category.title}
          title={category.title}
        />
      )
    })}
    </ul>
  );
}

Then your <SidebarCategory> component should return a div (for example) the title of which is filled in from the props that you've provided it.

const SidebarCategory = ({ title }) => {
  return <div className="SidebarCategory">{title}</div>
}

export default SidebarCategory;

First in SidebarCategories

import {SidebarCategory}... //with curly braces

Second in Sidebar:

import SidebarCategories from "./SidebarCategories"; //without curly braces

See:

export class SidebarCategory //no default -> import {SidebarCategory} from...
export default SidebarCategories; //with default -> import SidebarCategories from ...

Try these: 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"/>, document.getElementById("app"));

Sidebar.js

import React from "react";

import SidebarCategories from "./SidebarCategories";

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>
        );
    }
}

export default Sidebar;

SidebarCategory.js

import React from "react";

class SidebarCategory extends React.Component {
    render() {
        return (
                <div className="row">
                      <div className="col-sm-10">
                          {this.props.category.title}
                      </div>
                </div>
        );
    }
}

export default SidebarCategory;

SidebarCategories.js

import React from "react";
import SidebarCategory from './SidebarCategory';

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

    componentWillMount() {
        this.setState({categories: [
            {
                id: 1,
                title: "Home",
            },
            {
                id: 2,
                title: "Gallery",
            }
        ]});
    }

    render() {
        let list = this.state.categories.map((category) => {
          <li className="sidebar__category container-fluid" key={category.id}><SidebarCategory category={category} /></li>
        });

        return (
            <ul className="sidebar__categories container-fluid">
                {list}
            </ul>
        );
    }
}

export default SidebarCategories;

I believe the issue is in your sidebarCategory.js, you created a stateless (arrow function) component inside a stateful component.

since its just a component that render data from its props you can use the stateless/arrow function alone like this.

    const SidebarCategory = ({ title }) => {
      return (<div className="sidebarCategory">{title}</div>);
    }
    export default SidebarCategory; // this way its exported as default component, import it without using curly brackets (import SidebarCategory from './SidebarCategory';
    // OR
    export SidebarCategory; // this way its exported as non-default component, import it using the curly brackets (import {SidebarCategory} from './SidebarCategory';