Why do I get an error saying that users and setUsers is not used when it is used in the select tag and in the getCompanyUsers const function? I used the exact same logic for the items and it didn’t give me any error. I have tried separating the two functions in different useEffect functions but it gave the same error.
>Failed to compile.
>
>[eslint]
>srccomponentsstockDeleteItemForm.js
> Line 10:12: 'users' is assigned a value but never used no-unused-vars
> Line 10:19: 'setUsers' is assigned a value but never used no-unused-vars
>
>Search for the keywords to learn more about each error.
function AssignItemForm(){
const [items, setItems] = useState({});
const [users, setUsers] = useState({});
useEffect(() => {
getCompanyItems(1);
getCompanyUsers(1);
}, []);
const getCompanyItems = (company_id) => {
const data = qs.stringify({ 'company': company_id });
const csrftoken = getCookie('csrftoken');
axios.post('/api/getcompanyitems', data, {
headers: { 'X-CSRFToken': csrftoken }
})
.then(response => {
setItems(response.data);
})
.catch(error => {
console.log(error);
});
};
const getCompanyUsers = (company_id) => {
const data = qs.stringify({ 'company': company_id });
const csrftoken = getCookie('csrftoken');
axios.post('/api/getcompanyusers', data, {
headers: { 'X-CSRFToken': csrftoken }
})
.then(response => {
setUsers(response.data);
})
.catch(error => {
console.log(error);
});
};
return (
<div>
<div className='stock-form-container'>
<h1>ASSIGN ITEM</h1>
<form method='POST' action='/api/assignitem'>
<input type="hidden" name="csrfmiddlewaretoken" value={csrftoken} />
Item ID *
<br/>
<select placeholder='' name='item_id'>
{
Object.keys(items).map(itemId => (
<option key={itemId} value={itemId}>{itemId}, {items[itemId].type_of_item}, Assigned to : {items[itemId].assigned_to}</option>
))
}
</select>
<br/>
Assigned to *
<br/>
<select placeholder='' name='assigned_to'>
{
Object.keys(users).map(userId => (
<option key={userId} value={userId}>{userId}, {users[userId].name} {users[userId].lastname}</option>
))
}
</select>
<br/>
<input type='hidden' name='redirect' value='/stock' />
<input type='submit'/>
</form>
</div>
</div>
);
}
2
Answers
The error is in DeleteItemForm.js from directory >srccomponentsstockDeleteItemForm.js but you are showing AssignItemForm component.
And you are calling the getCompanyItems and getCompanyUsers functions before they are declared. Move the function declarations above the useEffect hook.
you just need to attach the code related to:
generally, this error is a linting error more that a code error and can be disabled or lower it’s severity to warning rather than error.