Naomi Naomi - 1 month ago 15
React JSX Question

Create a drop down from header without resizing header with React

I am creating a header where there will be an image for each user. When I press the image there should be a dropdown menu with options such as log out and settings (similar to the user dropdown on facebook and similar pages). I have used a toggle effect with React

class Header extends React.Component {
constructor() {
super();
this.state = {
showOptions: false
};
}
render() {
let dropDownMenu;
if(this.state.showOptions){
dropDownMenu = <div className="dropDownMenu">Hello</div>
};
return (
<header className="fullWidth">

<div className="search">
<p className="courses">Courses</p>

<p>Search</p>
<input type="text" placeholder="Search"/>
<img src="https://en.opensuse.org/images/0/0b/Icon-user.png" className="userImage" onClick={this._handleClickA.bind(this)}/>
{dropDownMenu}
</div>

</header>
);
}
_handleClickA(){
this.setState({
showOptions: !this.state.showOptions
});
}
}

ReactDOM.render( < Header />, document.getElementById('header'));


I have considered to make the dropdown in another component and pass it to the header component but I couldn't get it to work so I was trying to do it this way. When I toggle it the whole header changes size and I only want it to create a dropdown with potential other color from the header.

How can I do this?

Answer

You have to use position:absolute for your dropdown.

Also try to take a look to this component which is awesome React-Tether