I have two React components and I want to make them so that selecting something in one of them results in another changing.
const MainTest = () => {
const [selectedTable, setSelectedTable] = useState("");
function handleSelectedTableChange(newTable) {
setSelectedTable(newTable);
}
return (
<div style={{ display: 'flex', flex: 1 }}>
<div style={{ flex: 1 , background: 'lightgray', border: '5px solid #FFF', borderRadius: '10px', padding: '10px' }}>
<DatabaseInfoPanel handleChange={handleSelectedTableChange} />
</div>
<div style={{ flex: 3 }}>
<DatabaseContent selectedTable={selectedTable} />
</div>
</div>
</div>
);
}
In DatabaseInfoPanel component:
const DatabaseInfoPanel = (handleChange) => {
...
const handleNodeClick = (event, nodeId) => {
if (parentDatabase) {
...
handleChange("Test");
} else {
...
}
}
}
In DatabaseContent component:
const DatabaseContent = (selectedTable) => {
...
return (
<div>
<h1>{selectedTable}</h1>
</div>
);
};
However when I select something that will call handleChange function I get:
handleChange is not a function
TypeError: handleChange is not a function
at handleNodeClick (http://localhost:3000/static/js/bundle.js:1418:7)
at handleClick (http://localhost:3000/static/js/bundle.js:67258:25)
at HTMLUnknownElement.callCallback (http://localhost:3000/static/js/bundle.js:89160:18)
at Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/bundle.js:89204:20)
at invokeGuardedCallback (http://localhost:3000/static/js/bundle.js:89261:35)
at invokeGuardedCallbackAndCatchFirstError (http://localhost:3000/static/js/bundle.js:89275:29)
at executeDispatch (http://localhost:3000/static/js/bundle.js:93418:7)
at processDispatchQueueItemsInOrder (http://localhost:3000/static/js/bundle.js:93444:11)
at processDispatchQueue (http://localhost:3000/static/js/bundle.js:93455:9)
at dispatchEventsForPlugins (http://localhost:3000/static/js/bundle.js:93464:7)
Although I am pretty certain that handleChange is in fact, a funciton.