Mixing
Edit component property onClick Next.js
Am new with Next.js seeking your support to explain how to pass a new value for a property of a component. I used Material-UI library for styling.
While am trying to change open property for a drawer component it always show for me [TypeError] 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
asked Jan 1 at 4:28
Abdulaziz.MusaileekhAbdulaziz.Musaileekh
13518
add a comment |
Am new with Next.js seeking your support to explain how to pass a new value for a property of a component. I used Material-UI library for styling.
While am trying to change open property for a drawer component it always show for me [TypeError] 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
asked Jan 1 at 4:28
Abdulaziz.MusaileekhAbdulaziz.Musaileekh
13518
add a comment |
Am new with Next.js seeking your support to explain how to pass a new value for a property of a component. I used Material-UI library for styling.
While am trying to change open property for a drawer component it always show for me [TypeError] 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
asked Jan 1 at 4:28
Abdulaziz.MusaileekhAbdulaziz.Musaileekh
13518
Am new with Next.js seeking your support to explain how to pass a new value for a property of a component. I used Material-UI library for styling.
While am trying to change open property for a drawer component it always show for me [TypeError] 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
javascript material-ui next.js
asked Jan 1 at 4:28
Abdulaziz.MusaileekhAbdulaziz.Musaileekh
13518
asked Jan 1 at 4:28
Abdulaziz.MusaileekhAbdulaziz.Musaileekh
13518
asked Jan 1 at 4:28
Abdulaziz.MusaileekhAbdulaziz.Musaileekh
13518
asked Jan 1 at 4:28
Abdulaziz.MusaileekhAbdulaziz.Musaileekh
13518
asked Jan 1 at 4:28
Abdulaziz.MusaileekhAbdulaziz.Musaileekh
13518
13518
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
I am not sure where you declared the drawerOpened variable.
Either way, once you swapped the value of drawerOpened, the prop for drawer has changed, and there is no need to tamper with drawer.props.open:
const handleClick = e => {
e.preventDefault();
drawerOpened = !drawerOpened;
};
Another thing to point out, ideally Index should be a React Class (not a functional component) which has state. drawerOpen would be stored in state and passed down as a prop to drawer. handleClick would setState of drawerOpened:
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>
}
}
answered Jan 1 at 16:34
Avremel KaminetzkyAvremel Kaminetzky
478620
1
It is working fine now, Thank you :)
– Abdulaziz.Musaileekh
Jan 2 at 15:49
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53993007%2fedit-component-property-onclick-next-js%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
I am not sure where you declared the drawerOpened variable.
Either way, once you swapped the value of drawerOpened, the prop for drawer has changed, and there is no need to tamper with drawer.props.open:
const handleClick = e => {
e.preventDefault();
drawerOpened = !drawerOpened;
};
Another thing to point out, ideally Index should be a React Class (not a functional component) which has state. drawerOpen would be stored in state and passed down as a prop to drawer. handleClick would setState of drawerOpened:
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>
}
}
answered Jan 1 at 16:34
Avremel KaminetzkyAvremel Kaminetzky
478620
1
It is working fine now, Thank you :)
– Abdulaziz.Musaileekh
Jan 2 at 15:49
add a comment |
I am not sure where you declared the drawerOpened variable.
Either way, once you swapped the value of drawerOpened, the prop for drawer has changed, and there is no need to tamper with drawer.props.open:
const handleClick = e => {
e.preventDefault();
drawerOpened = !drawerOpened;
};
Another thing to point out, ideally Index should be a React Class (not a functional component) which has state. drawerOpen would be stored in state and passed down as a prop to drawer. handleClick would setState of drawerOpened:
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>
}
}
answered Jan 1 at 16:34
Avremel KaminetzkyAvremel Kaminetzky
478620
1
It is working fine now, Thank you :)
– Abdulaziz.Musaileekh
Jan 2 at 15:49
add a comment |
I am not sure where you declared the drawerOpened variable.
Either way, once you swapped the value of drawerOpened, the prop for drawer has changed, and there is no need to tamper with drawer.props.open:
const handleClick = e => {
e.preventDefault();
drawerOpened = !drawerOpened;
};
Another thing to point out, ideally Index should be a React Class (not a functional component) which has state. drawerOpen would be stored in state and passed down as a prop to drawer. handleClick would setState of drawerOpened:
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>
}
}
answered Jan 1 at 16:34
Avremel KaminetzkyAvremel Kaminetzky
478620
I am not sure where you declared the drawerOpened variable.
Either way, once you swapped the value of drawerOpened, the prop for drawer has changed, and there is no need to tamper with drawer.props.open:
const handleClick = e => {
e.preventDefault();
drawerOpened = !drawerOpened;
};
Another thing to point out, ideally Index should be a React Class (not a functional component) which has state. drawerOpen would be stored in state and passed down as a prop to drawer. handleClick would setState of drawerOpened:
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>
}
}
answered Jan 1 at 16:34
Avremel KaminetzkyAvremel Kaminetzky
478620
edited Jan 1 at 16:41
answered Jan 1 at 16:34
Avremel KaminetzkyAvremel Kaminetzky
478620
answered Jan 1 at 16:34
Avremel KaminetzkyAvremel Kaminetzky
478620
answered Jan 1 at 16:34
Avremel KaminetzkyAvremel Kaminetzky
478620
478620
1
It is working fine now, Thank you :)
– Abdulaziz.Musaileekh
Jan 2 at 15:49
add a comment |
1
It is working fine now, Thank you :)
– Abdulaziz.Musaileekh
Jan 2 at 15:49
1
1
It is working fine now, Thank you :)
– Abdulaziz.Musaileekh
Jan 2 at 15:49
It is working fine now, Thank you :)
– Abdulaziz.Musaileekh
Jan 2 at 15:49
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53993007%2fedit-component-property-onclick-next-js%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
