Trying to call useContext outside of a function component - reactjs

Question

I'm trying to figure out how to correctly use React Context. I'm hung up on this issue of trying to access the Context from outside the function component. I'm getting the error:
Line 9:18: React Hook "useContext" is called in function "onDragEnd" which is neither a React function component or a custom React Hook function react-hooks/rules-of-hooks
Here is my entire Schedule js file:
import React, { useContext } from 'react';
import PropTypes from 'prop-types';
import { DragDropContext } from 'react-beautiful-dnd';
import OrderColumn from '../ordercolumn/OrderColumn';
import { ScheduleContext } from '../../schedule-context';
const onDragEnd = (result) => {
const { destination, source, draggableId } = result;
const context = useContext(ScheduleContext); // <-- issue is here
if (!destination) {
return;
}
if (
destination.droppableId === source.droppableId &&
destination.index === source.index
) {
return;
}
const column = context.columns[source.droppableId];
const orderIDs = Array.from(column.orderIDs);
orderIDs.splice(source.index, 1);
orderIDs.splice(destination.index, 0, draggableId);
const newColumn = {
...column,
orderIDs: orderIDs
};
const newColumns = {
...context.columns,
newColumn
};
context.setColumns(newColumns);
};
const Schedule = () => {
const { orders, setOrders, columns, setColumns } = useContext(
ScheduleContext
);
return (
<DragDropContext onDragEnd={onDragEnd}>
<div className={'full-width'}>
<h1 className={'text-center'}>Schedule</h1>
<div className={'lines row no-gutters'}>
{columns.map(function(val, index) {
if (index === 0) {
return (
<OrderColumn
title={val.title}
columnId={index}
orders={orders}
setOrders={setOrders}
setColumns={setColumns}
/>
);
} else {
return (
<OrderColumn
title={val.title}
columnId={index}
setOrders={setOrders}
setColumns={setColumns}
/>
);
}
})}
</div>
</div>
</DragDropContext>
);
};
Schedule.propTypes = {
orders: PropTypes.array
};
export default Schedule;

Answer 1

Not to sound glib, but essentially it means exactly what it says. onDragEnd is not a React component because it is not returning a ReactElement or some kind of JSX. If you edited your blank return statements to return <div>'s (for all paths) it would be considered a component and work properly, but as of right now it's not returning anything.

Answer 2

Using useCallback and passing the context to that function will help solve your problem.
An example below:
const onDragEnd(result, context) => {
// Adjust as necessary
}
const Schedule = () => {
const context = useContext(ScheduleContext);
const onDragEnd = useCallback((result) => onDragEnd(result, context), [context]);
return <DragDropContext onDragEnd={onDragEnd}>
You can also either inline onDragEnd or pull out more and make a custom hook.