score:2
your prop name is spelled incorrectly, it should be this.props.isopen
also a quick little tip, it is possible to use just one function for opening/closing the modal.
something like this will work:
handletestconnectclick = () => {
this.setstate(prevstate => ({
...prevstate,
isopen: !prevstate.isopen
}));
}
here we use our previous state and with the ! operator
we switch from true to false and vice versa
update 2.0:
after taking a closer look at the material ui documentation, i noticed that your dialog prop for setting the modal visibility is wrong. it should be open
instead of isopen
.
import testconnectdialog from './testconnectdialog';
class homepage extends react.component {
constructor(props) {
super(props);
this.state = {
isopen: false
};
//this.handletestconnectclick = this.handletestconnectclick.bind(this);
//this.handleclosedialog = this.handleclosedialog.bind(this);
// when using arrow functions you don't need to bind the this keyword
}
handletestconnectclick = () => {
this.setstate(prevstate => ({
...prevstate,
isopen: !prevstate.isopen
}));
}
render() {
return (
<div classname="section">
<button classname="connect-test-button"
// onclick={this.handletestconnectclick}>
// change the onclick to the one below
onclick={ () => this.handletestconnectclick() }
test
</button>
<testconnectdialog isopen={this.state.isopen} handletestconnectclick={this.handletestconnectclick}/>
</div>
);
}
};
export default homepage;
in testconnectdialog
component:
class testconnectdialog extends react.component {
render() {
return (
<dialog
open={this.props.isopen}
onclose={this.props.handletestconnectclick}
aria-labelledby="alert-dialog-title"
aria-describedby="alert-dialog-description"
>
<dialogcontent>
<dialogcontenttext id="alert-dialog-description">
test
</dialogcontenttext>
</dialogcontent>
<dialogactions classname="dialog-action">
<button onclick={this.props.handletestconnectclick} classname="primary-button">
ok
</button>
</dialogactions>
</dialog>
);
}
};
export default testconnectdialog;
score:0
you're passing the props <testconnectdialog isopen={this.state.isopen} />
but trying to read it with isopen={this.props.isopen}
.
change your code to this: isopen={this.props.isopen}
score:0
update testcomponent component as given
class testconnectdialog extends react.component {
render() {
const {isopen, onok} = this.props;
return (
<dialog
isopen={isopen}
onclose={this.props.handleclose}
aria-labelledby="alert-dialog-title"
aria-describedby="alert-dialog-description"
>
<dialogcontent>
<dialogcontenttext id="alert-dialog-description">
test
</dialogcontenttext>
</dialogcontent>
<dialogactions classname="dialog-action">
<button onclick={this.props.handleclose} classname="primary-button">
ok
</button>
</dialogactions>
</dialog>
);
}
};
export default testconnectdialog;
score:0
in the homepage component why is isopen destructured from the prop and initialised in state. you have to use one, using both is confusing, you are working with that on the state but passing the one from the prop
Source: stackoverflow.com
Related Query
- Reactjs: Dialog open is not working on button click
- File Uplaod not working on Button click material-UI V1 ReactJs
- Button click not working in ReactJs
- ReactJS & Google MDL Button onClick not working
- ReactJS Ant Design - Open DatePicker on button click
- Default disabled button click event is not firing on reactjs
- Back button is not working when using history.pushState() in ReactJs
- React Routers not working on button click
- Go Back button is not working when added a query param in ReactJs
- React Event Handler Button Click Not Working on First Click
- OnClick not working when rendering React button on a custom dialog
- reactjs enable disable button through a function not working
- Why my dispatch is not working for button click event?
- how to open a dialog in material-ui on button click
- Web frontend button click html tag not working
- - AJAX DataTables - Adding a condition in 'columns' (render) which returns a button (Link) of React-Router is not working - ReactJS -
- Toggle switch button not working in reactJs app
- Focus on TextField not working when button pressed in Dialog - Material UI
- React-Redux: Action Dispatch on button click not working
- Checkbox property DefaultChecked in reactjs not working with states updated by radio button
- The action menu is not getting closed even if I click somewhere on page, the menu remains open until I explicitly click on the Action button again
- reactjs state is not being updated with button click using useState hook
- How to make open url on click on button in reactjs
- Can I open a jw modal (imported from jw-react-modal) in reactjs without button click
- onClick not working reactjs in button despite binding
- React 16 Hidden button Modal does not open on click
- Button Click inside anchor tag not working in React Js Component
- Open a div element on a button click with ReactJS
- Applying multiple filter using reactjs but not able to set state at the time of button click
- Bootstrap toggler button not working in reactjs
More Query from same tag
- Can't access FormData using sign-up form from Material-UI example templates
- How do I conditionally get items from DB using specific value in React(Next.js)?
- react.js BEST WAY: show or hide html element on state change
- add inputs dynamically react redux
- fetch data is providing some [assets] and [objects]. How can I de-structure these in the following code in order to list them out?
- How can I get DateRangePicker to render calendars on click?
- Call Javascript function in .js file with React from HTML file
- delete happens before opening a modal with confirmation to delete
- TypeError: Object(...) is not a function React
- How to access a prop in a layout component if my component is being passed to the layout component as a chilren prop in ReactJS?
- React: How to open a newly added accordion item?
- react Login with useContext useReducer basic example
- React Hooks - useState value cannot change
- How can I can make my text truncate to work on continuous responsive?
- Setting bar color for each bar in D3 React
- React Component API Architecture
- React-Redux with Bootstrap -- modal component
- Clickable routing without link tag in react js
- How can I get the URL address from the browser in ReactJS (servers URL)
- check state of another functional component
- React with Ant desing Table.set column by useSate header have check box.Check box not working
- redux-actions handleActions isn't changing the state
- Javascript Dictionary Value coming out as undefined
- Dangerously Set innerHTML React
- React/Nextjs - know what page is rendered on _app.js
- Stuffing React component in Backbone view
- Dockerize React application with docker-compose
- how to send null object (image) using axios to django
- How to use Material-UI without create-react-app
- getting jquery object after bind(this) in react componentDidMount