M
M
Maxim Supreme2018-10-20 19:24:12
React
Maxim Supreme, 2018-10-20 19:24:12

Where do the categories in the sidebar (react) come from?

There is a project on react, there is a sidebar in which categories are substituted, you need to replace the name of one of the categories, because I don’t know React, I need help, if possible, then on teamviewer, I found a piece of code that is responsible for rendering this sidebar, I can’t understand where the categories themselves come from (

class SliderSidebar extends Component {
    componentWillMount() {
        const { actions } = this.props;
        actions.fetchListIfNeeded();
    }

    componentDidMount() {
        let $el = $(findDOMNode(this));
        if ($el.height() > 514) {
            $el.addClass('short');
        }
    }

    handleShowMore() {
        $(findDOMNode(this)).removeClass('short');
    }

    render() {
        const { loading, received, objects } = this.props;

        if (loading || !received) {
            return null;
        }

        let data = objects;
        let dl_count = 0;
        let dl = data.map(item => {
            dl_count = dl_count + item.items.length;
            return item.items.length;
        });

        let dlc = dl.map(item => item / dl_count * 100);

        if (dlc.length == 2) {
            if (dlc[0] > 60) {
                dlc[0] = 60;
            }
            if (dlc[1] < 40) {
                dlc[1] = 40;
            }
        }

        let menuNodes = data.map((item, i) => {
            let nodes = item.items.map(model => (
                    <li key={'ss' + model.id}>
                        <Link to="CatalogList" params={{url: model.url}}>
                            {model.name}
                        </Link>
                    </li>
                ));

            return (
                <div key={'ssr' + item.id} style={{height: dlc[i] + '%'}} className="root-menu">
                    <p><strong>{item.name}</strong></p>

                    <div className="bottom">
                        <div className="show_more">
                            <span className="text" onClick={this.handleShowMore.bind(this)}>
                                Смотреть все категории
                            </span>
                        </div>
                        {i != data.length - 1 ? <hr/> : null}
                    </div>

                    <ul className="sidebar-menu">{nodes}</ul>
                </div>
            );
        });

        return <div className="sidebar index short">{menuNodes}</div>;
    }
}

export default connect(state => state.category, dispatch => {
    return {
        actions: bindActionCreators(actions, dispatch)
    };
})(SliderSidebar);

Answer the question

In order to leave comments, you need to log in

1 answer(s)
R
Roman Budnyakov, 2018-10-23
@69Roman69

Taken from the 'props' that you pass from the parent element to the component
const { objects } = this.props;
and here you draw it
let menuNodes = data.map((item, i) => {
let nodes = item.items.map(model => (
'put console here and change'
{model.name}
));

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question