controls.jsx

'use strict';
import React from 'react';

class Controls extends React.Component {
    constructor(props) {
        super(props);
        this.controlsStyle = {position: 'absolute'};
    }

    moveLeft = () => this.props.swapModules(this.props.module, 'left');
    moveRight = () => this.props.swapModules(this.props.module, 'right');

    render() {
        if (!this.props.show) return null;
        
        return (
            <div style={this.controlsStyle}>
                {this.props.module.left_module && <i className="fa fa-arrow-left pointer left" onClick={this.moveLeft} />}
                {this.props.module.right_module && <i className="fa fa-arrow-right pointer right" onClick={this.moveRight} />}
            </div>
        );
    }
}

export default Controls;

module.jsx

'use strict';
import React from 'react';
import Controls from './controls';

class Module extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            showControl: false
        };
        this.toggleControl = this.toggleControl.bind(this);
        this.imageStyle = {maxWidth: '100%', maxHeight: 'auto'};
        this.moduleStyle = {float: 'left', position: 'relative', maxWidth: '20vw'};
    }


    toggleControl() {
        this.setState(prevState => {
            return {showControl: !prevState.showControl}
        });
    }

    render() {
        const module = this.props.module;
        return (
            <div className="continuous-module"
                 style={this.moduleStyle}
            >
                <Controls module={module}
                          show={this.state.showControl}
                          swapModules={this.props.swapModules}
                />
                <img src={module.photo.photo_link}
                     style={this.imageStyle}
                     onClick={this.toggleControl}
                />
            </div>
        );
    }
}
export default Module;

modules.jsx

'use strict';
import React from 'react';
import ReactDOM from 'react-dom';
import ModulesRow from './modulesRow';
import axios from 'axios';

class Modules extends React.Component {
    constructor() {
        super();
        this.data = JSON.parse(document.getElementById('data').value);
        this.state = {
            modules: this.data.modules
        };
    }

    swapModules(module, direction) {
        const moduleId = module.module_id;
        const swapModuleId = direction == 'left' ? module.left_module_id : module.right_module_id;
        
        // А вот так нельзя делать. Компонент — это просто вьюха. Он не знает, откуда ему приходят данные и каким образом.
        // Никаких обращений к данным. У его есть только пропсы и стейт. Если нужно внешнее действие, передавай ему колбэк
        // с соответствующими параметрами.
        axios.post('/ajax/swap-modules', {
            selectedModule: moduleId,
            swapModule: swapModuleId
        }).then(response => {
            console.log(response.data);
        }).catch(err => {
            console.log(err)
        });
    }

    render() {
        return <ModulesRow modules={this.state.modules} slug={this.data.section_slug}
                           swapModules={this.swapModules}></ModulesRow>;
    }
}

ReactDOM.render(<Modules />, document.getElementById('continuous-modules'));

modulesRow.jsx

'use strict';
import React from 'react';
import Module from './module';

class ModulesRow extends React.Component {
    constructor(props) {
        super(props);
    }

    componentDidMount() {
    }

    render() {
        let modules = [];
        for (let key in this.props.modules) {
            if (this.props.modules.hasOwnProperty(key)) {
                const section = this.props.modules[key];
                let sort = 0;
                section.forEach((module) => {
                    modules.push(<Module swapModules={this.props.swapModules} sort={sort} module={module} key={this.props.slug + '_' + module.module_id}/>);
                    sort++;
                });
            }
        }
        return (
            <div className="row expanded collapse">
                <div className="column">
                    {modules}
                </div>
            </div>
        );
    }
}
export default ModulesRow;