Hi,
I can acheive this code in class component.but now i want this in functional hook.my fuctional component knowledge is low compared to class component.can anyone convert this class to functional.
constructor(props) {
super(props);
this.state={
selectedOption: [] ,
Dropdownlist:[],
setSelectedValue:[],
Details: [] ,
ImageDisplay: '
}
this.submit = this.submit.bind(this);
this.dropdown = this.dropdown.bind(this);
this.handleChange = this.handleChange.bind(this);
}
getValues(apiValues) {
let previousValue = [];
let names = apiValues[0].profile_name.split(",");
let ids = apiValues[0].user_id.split(",");
let index = 0;
if (names.length === ids.length) {
names.forEach((item) => {
let data = { value: ids[index].toString(), label: item };
index++;
previousValue.push(data);
});
}
this.setState({ selectedOption: previousValue });
}
submit() {
let user = JSON.parse(localStorage.getItem('user'));
const accessToken = user;
console.log(accessToken);
fetch(url, {
method: 'GET',
headers: {
"Content-type": "application/json",
"Accept": "application/json",
Authorization: "Bearer " + accessToken,
"Access-Control-Allow-Headers": "Access-Control-Request-Headers "
},
}).then(response => response.json())
.then(data => {
this.getValues(data);
this.setState({
Details: data
});
})}
dropdown() {
let user = JSON.parse(localStorage.getItem('user'));
const accessToken = user;
console.log(accessToken);
fetch(url, {
method: 'GET',
headers: {
"Content-type": "application/json",
"Accept": "application/json",
Authorization: "Bearer " + accessToken,
"Access-Control-Allow-Headers": "Access-Control-Request-Headers "
},
}).then(response => response.json())
.then(data => {
this.setState({
Dropdownlist: data
});
console.log("dropdown",data);
});
}
handleChange(value, actionDetails) {
let items = [...this.state.selectedOption];
if (actionDetails.action === "remove-value") {
if (items) {
var index = -1;
items.forEach((item, i) => {
if (item.label === actionDetails.removedValue.label && item.value === actionDetails.removedValue.value) {
index = i;
return;
}
});
if (index > -1) {
items.splice(index, 1);
}
}
}
else {
items.push(actionDetails.option);
}
this.setState({ selectedOption: items });
}
componentDidMount() {
window.addEventListener('load', this.submit);
this.submit();
window.addEventListener('load', this.dropdown);
this.dropdown();
}
componentWillUnmount() {
window.removeEventListener('load', this.submit);
this.submit();
window.addEventListener('load', this.dropdown);
this.dropdown();
}
render() {
const {Details,Dropdownlist,setSelectedValue} = this.state;
let selectedValue = [];
let selectedLabel = [];
this.state.selectedOption && this.state.selectedOption.forEach((item) => {
selectedValue.push(item.value);
selectedLabel.push(item.label);
});
let unique = [...new Set(selectedLabel)]
console.log(unique);
let unique2 = [...new Set(selectedValue)]
console.log(unique2);
return (
<div style={{width: '300px'}}>
<Select
isClearable={false}
placeholder={"Select Mates"}
styles={this.customStyles}
menuPortalTarget={document.querySelector('body')}
value={this.state.selectedOption}
onChange={this.handleChange}
selectedValue={true}
hideSelectedOptions={false}
options={Dropdownlist.map(e => ({ label: e.Name, value: e.Id}))}
isMulti
theme={theme => ({
...theme,
colors: {
...theme.colors,
neutral50: 'white',
},
})}
/>
<input type="hidden" name="user_id" defaultValue={unique2} />
{Details.map(Det=>
<input type="hidden" name="default_userid" defaultValue={Det.user_id} />)}
</div>
);
}
}