{"size": 1822, "ext": "js", "max_stars_repo_path": "src/pages/mtp/draggable.js", "max_stars_repo_name": "Virtual-Ai/Phonix-React-Web-Application", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/pages/mtp/draggable.js", "max_issues_repo_name": "Virtual-Ai/Phonix-React-Web-Application", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/pages/mtp/draggable.js", "max_forks_repo_name": "Virtual-Ai/Phonix-React-Web-Application", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 33.7407407407, "max_line_length": 95, "alphanum_fraction": 0.3627881449}
import React, {Component} from 'react';
import {Droppable} from 'react-beautiful-dnd';
import Dragee from './task';
import Droopable from './dropee';

class Draggablec extends Component {

    render() {
        return (
            <div className="container coll">
                <div className='col2'>
                    <h3 className='h3'>Images</h3>

                    {this.props.states.map((task, index) =>

                        <Droppable droppableId={task.id + "drags"} key={task.id}>
                            {provided => (

                                <div className='list'
                                     ref={provided.innerRef}
                                     {...provided.droppableProps}
                                >
                                    <Dragee index={task.id + 'drags'} task={task}/>
                                </div>
                            )}

                        </Droppable>
                    )}
                </div>
                <div className='col2'>
                    <h3 className='h3'>Prepositions</h3>

                    {this.props.capitals.map((capital, index) =>

                        <Droppable droppableId={capital.id + "drops"} key={capital.id}>
                            {provided => (
                                <div className='list'
                                     ref={provided.innerRef}
                                     {...provided.droppableProps}
                                >
                                    <Droopable index={capital.id + "drops"} capital={capital}/>
                                </div>
                            )}

                        </Droppable>
                    )}
                </div>

            </div>
        );
    }
}

export default Draggablec;