Styjun

I have a "edit" button that is created within a draggable-target class, which is basically an editable div box. When this button is clicked, it should change the state of the drawer class, making it "open", by calling the function handleDrawerOpen() in the drawer class. Any solutions as to how to effectively change the state of the drawer?

I've tried the method of making the drawer a constant object and calling the function of the object, but that isn't working for some reason.

This is the state and function for handleDrawerOpen/Close in the temporary drawer class, as well as how I'm exporting it to be used in other classes.

state = 
 open: false,
 ;

 handleDrawerOpen = () => 
 this.setState( open: true );
 ;

 handleDrawerClose = () => 
 this.setState( open: false );
 ;

[rest of code here]

TemporaryDrawer.propTypes = 
 classes: PropTypes.object.isRequired,
;

const drawer = new TemporaryDrawer();
export default withStyles(styles)(TemporaryDrawer);

This is the edit button code in a different class. TemporaryDrawer is being imported into this class as well.

editButton() 
 console.log("working edit");
 alert('You can drag a different field or occupation from the drawer at the left!');
 drawer.handleDrawerOpen;
 

I'm not getting any errors, but the drawer isn't opening when I click the edit button.

This is how I'm importing the temporarydrawer into the class where the button is called. I'm importing both the drawer object and the actual TemporaryDrawer class because the class itself needs to be displayed within the career-app class.

import drawer from './TemporaryDrawer.js';
import TemporaryDrawer from './TemporaryDrawer.js';

And this is how it's being rendered within the render function.

<div className="careerApp">
<TemporaryDrawer handleDrop=(target, type, name) => this.handleDrop(target, type, name)/>
[There's a bunch of code here]
</div>

You need to call drawer.handleDrawerOpen():

editButton() 
 console.log("working edit");
 alert('You can drag a different field or occupation from the drawer at the left!');
 drawer.handleDrawerOpen();

As you can see in the import are used twice and each import points to a specific instance. The problem is when you are calling drawer.handleDrawerOpen(), the component is not being used any where so that why you are getting WEBPACK_IMPORTED_MODULE error. You cannot access the child function directly on the parent component. You will have to pass it as props handler to the editButton. Also have a look at the how you are structuring your components. This is not meant to be such complicated task. You can have a look at structuring you components in presentational and container structure. Have a look at the link.

If you can add the full components in codesandbox, we should be able to help you more.

Try with

editButton() 
 console.log("working edit"); 
 alert('You can drag a different field or occupation from the drawer at the left!'); 
 drawer.handleDrawerOpen();