Created
September 3, 2020 12:32
-
-
Save Forison/826a197e19e3cba05282a71a929c7ef6 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| - The constructor was spelt wrongly we have to change it to this to make avoid syntax error related to this. | |
| ``` | |
| constructor(props) { | |
| super(props) | |
| this.state = { | |
| isOpen: false, | |
| }; | |
| } | |
| ``` | |
| - Let us also validate our props-types whenever we use a prop like label. | |
| - The toggle method is not well implemented because it seems to set the old ```isOpen``` state to the ```isOpen```, we can implement it this way, | |
| ``` | |
| const {isOpen} = this.state; | |
| this.setState({isOpen: !isOpen}); | |
| ``` | |
| - The dropdown menu should only show when ```isOpen``` is true and hide when otherwise. Let us add a styling in with respect to the class that toggle based on ```isOpen``` | |
| ``` | |
| <ul className={`${isOpen ? 'dropdown-open' : ''} dropdown-menu`} aria-labelledby="dropdownButton" role="menu"> | |
| {this.props.children} | |
| </ul> | |
| ``` | |
| or we may wrap this jsx in a conditional statement such that it would show only if the isOpen is set to true. | |
| ``` | |
| {this.state.isOpen ? (<ul role="menu">{this.props.children}</ul>): ("<div></div>")} | |
| ``` | |
| - Render the line below in your DropdownItem | |
| ``` | |
| return(<div> <a href = {this.props.href}>{this.props.children}</a> </div>) | |
| ``` | |
| - Finally, Place to connect app.sync('PATCH', 'user', { dropdown_1_state: {true,false} }) wrapped within a componentDidMount() method |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment