Adjust the component's onClick property in Next.js

Question

Adjust the component's onClick property in Next.js

Looking for guidance on how to update a property value of a component in Next.js. I have been using the Material-UI library for styling.

Encountering an issue when attempting to modify the 'open' property of a drawer component, as it constantly displays a [TypeError] stating that 'open' is read-only.

const drawer = (
  <SwipeableDrawer open={drawerOpened}>
    <div tabIndex={0} role="button">
      {sideList}
    </div>
  </SwipeableDrawer>
);

const handleClick = e => {
  drawerOpened = !drawerOpened;
  drawer.props.open = drawerOpened;
  e.preventDefault();
};

const Index = () => (
  <div className={styles.root}>
    <AppBar position="static">
      <Toolbar>
        <IconButton
          className={styles.menuButton}
          color="inherit"
          aria-label="Menu"
          onClick={handleClick}
        >
          <MenuIcon />
        </IconButton>
        <Typography variant="h6" color="inherit" className={styles.grow}>
          Example
        </Typography>
        <Button color="inherit" style={{ right: "0px", position: "absolute" }}>
          Login
        </Button>
      </Toolbar>
    </AppBar>
    {drawer}
  </div>
);

javascript material-ui next.js

Answer 1

Answer №1

It is unclear where the drawerOpened variable was declared. However, once the value of drawerOpened is toggled, the prop for drawer will be updated, eliminating the need to modify drawer.props.open:

const handleClick = e => {
  e.preventDefault();
  drawerOpened = !drawerOpened;
};

In addition, it is recommended that the component Index be a React Class instead of a functional component, with the state including drawerOpen as a property passed down to drawer. The handleClick function should update the state using setState:

class Index extends React.Component {
  state = {drawerOpened: false}

  handleClick = e => {
    e.preventDefault();
    this.setState(prevState => ({
      drawerOpened: !prevState.drawerOpened
    }))
  };

  render() {
    return <div className={styles.root}>
      <AppBar position="static">
        <Toolbar>
          <IconButton
            className={styles.menuButton}
            color="inherit"
            aria-label="Menu"
            onClick={this.handleClick}
          >
            <MenuIcon/>
          </IconButton>
          <Typography variant="h6" color="inherit" className={styles.grow}>
            Example
          </Typography>
          <Button color="inherit" style={{ right: "0px", position: "absolute" }}>
            Login
          </Button>
        </Toolbar>
      </AppBar>
      <SwipeableDrawer open={this.state.drawerOpened}>
        <div tabIndex={0} role="button">
          {sideList}
        </div>
      </SwipeableDrawer>
    </div>
  }
}

Answer 2

It is unclear where the drawerOpened variable was declared. However, once the value of drawerOpened is toggled, the prop for drawer will be updated, eliminating the need to modify drawer.props.open:

const handleClick = e => {
  e.preventDefault();
  drawerOpened = !drawerOpened;
};

In addition, it is recommended that the component Index be a React Class instead of a functional component, with the state including drawerOpen as a property passed down to drawer. The handleClick function should update the state using setState:

class Index extends React.Component {
  state = {drawerOpened: false}

  handleClick = e => {
    e.preventDefault();
    this.setState(prevState => ({
      drawerOpened: !prevState.drawerOpened
    }))
  };

  render() {
    return <div className={styles.root}>
      <AppBar position="static">
        <Toolbar>
          <IconButton
            className={styles.menuButton}
            color="inherit"
            aria-label="Menu"
            onClick={this.handleClick}
          >
            <MenuIcon/>
          </IconButton>
          <Typography variant="h6" color="inherit" className={styles.grow}>
            Example
          </Typography>
          <Button color="inherit" style={{ right: "0px", position: "absolute" }}>
            Login
          </Button>
        </Toolbar>
      </AppBar>
      <SwipeableDrawer open={this.state.drawerOpened}>
        <div tabIndex={0} role="button">
          {sideList}
        </div>
      </SwipeableDrawer>
    </div>
  }
}

Adjust the component's onClick property in Next.js

Answer №1

Similar questions

Getting the most out of geometry vertices with Threejs: mastering partial transforms

I'm just starting to explore async programming. Can someone explain how to ensure proper sequencing of events across multiple objects?

How to effectively test a form submission with an external API using React, Jest, and Enzyme?

Tips for implementing event handlers on dynamically generated li elements in VueJS

Popper.js enhances the appearance of the input field label

Is it possible to have the cursor rotate or animate by 45 degrees when clicked

You need to click the React onClick button twice in order to successfully trigger the API

Determine whether the color is a string ('white' === color? // true, 'bright white gold' === color? // false)

Entering data into a webpage and retrieving the result from a designated cell in a Google Sheets document

The scope of this variable in Node.js results in an undefined response

What type of technology is typically utilized in creating functional platforms such as goDaddy, wix, and other web design websites?

Encountered a TypeError with mongoose: The function specified is not recognized as a valid function when attempting to create a new mongoose instance

Sending AJAX data from VIEW to CONTROLLER in PHP (MVC) using AJAX: A step-by-step guide

Template does not reflect changes made to filters in real-time

Updating Documents in CouchDB

Exploring the contrast of && and ?? in JavaScript

`The Art of Binding() with Objects Created on the Fly`

Implementing AngularJS to store data in a JSON object

Troubleshooting issue with the spread operator and setState in React, Typescript, and Material-ui

Clicking will cause my background content to blur