Naomi Naomi - 4 months ago 39
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() {
this.state = {
showOptions: false
render() {
let dropDownMenu;
dropDownMenu = <div className="dropDownMenu">Hello</div>
return (
<header className="fullWidth">

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

<input type="text" placeholder="Search"/>
<img src="" className="userImage" onClick={this._handleClickA.bind(this)}/>

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?


You have to use position:absolute for your dropdown.

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