/* Below is your code, please find the attached output for the same*/

import React from "react";

import { FormInput, InputGroup } from "shards-react";

import { FaEdit } from "react-icons/fa";

import { FormCheckbox } from "shards-react";

import { IoMdCheckmark,IoMdClose } from "react-icons/io";

import DropDownContainer from "./DropDown-container";

let channelmap = [];

let departmentmap = [];

let localemap = [];

let categorymap = [];

export default class Tablerow extends React.Component {

constructor(props) {

super(props);

this.state = {

clicked: false,

active: true

};

this.handlePopUpClick = this.handlePopUpClick.bind(this);

}

componentWillReceiveProps(nextProps) {

this.getJSONfromArr(nextProps.channeldata, channelmap);

this.getJSONfromArr(nextProps.localesdata, localemap);

this.getJSONfromArr(nextProps.categorydata, categorymap);

this.getJSONfromArr(nextProps.departmentdata, departmentmap);

}

handlePopUpClick() {

if (this.props.handle) alert("Some row is already clicked");

else {

this.setState({ clicked: !this.state.clicked });

this.props.handleActiverow();

}

}

handleChange(e, active) {

const newState = {};

newState[active] = !this.state[active];

this.setState({ ...this.state, ...newState });

}

getJSONfromArr(data, variable) {

data.map(item => (variable[item.id] = item.name));

}

render() {

const {

handle,

label,

channeldata,

categorydata,

departmentdata,

localesdata,

onclick

} = this.props;

return this.state.clicked ? (

style={{ border: "1px solid lightgrey" }}

onClick={() => {

this.setState({ clicked: false });

this.props.handleActiverow();

}}

>

style={{ border: "1px solid lightgrey" }}

onClick={() => {

this.setState({ clicked: false });

this.props.handleActiverow();

}}

>

{label.id}

checked={this.state.active}

defaultChecked={label.is_active}

onChange={e => this.handleChange(e, "active")}

>

) : (

{label.id}

{channelmap[label.channel_id]}

{localemap[label.locale_id]}

{categorymap[label.category_id]}

{departmentmap[label.department_id]}

{label.url.length >= 25 ? (

{label.url.substring(0, 25) + "..."}

) : (

{label.url}

)}

checked={this.state.active}

defaultChecked={label.is_active}

disabled

>

{JSON.stringify(label.meta)}

);

}

}

Channels Actions Name Channel ID Locale ID Category 1 156 Default Boots Nordstrom US Myntra Default Blazers Myntra Default T-Shirts 12 Myntra Default Backpac! Myntra Default Legging