Sunday, 7 February 2016

Drop down menu with ReactJS

I will be showing three code examples of drop down menus with ReactJS.

The first example will be pure static content. The drop down menu items will be loaded and rendered at run time. I have used the ‘isOpen’ state variable to toggle the dropdown menu content from visible to invisible upon button click.

import React, { Component } from 'react';
import { render } from 'react-dom';

class App extends Component {
  constructor() {
    super();
    this.state = {
      isOpen:false
    };
    this.onDropDown = this.onDropDown.bind(this);
  }

  onDropDown(){
    this.setState({isOpen: !this.state.isOpen});
  }

  render() {
    return (
      <div className="dropdown">
        <button onClick={this.onDropDown}>Drop down example</button>
        <div className="dropdown-content" style={{display:(this.state.isOpen)? "block":"none"}}>
          <ul>
            <li>example 1</li>
            <li>example 2</li>
            <li>example 3</li>
          </ul>
        </div>
      </div>
    );
  }
}

render(<App />, document.getElementById('root'));

The second example is similar to the first one, however I will load the drop down items dynamically from state. I have added a ’dropItems’ array to the state to hold the contents of the drop down items. Note, I have used the javascript map() function to loop through the items in the ’dropItems’ array. A few things to remember when using the map() function with JSX: we have to wrap the code within a set of curly braces; the values to be rendered will also have to be wrapped in a set of curly braces and a special key attribute will need to be included. The key attribute helps React determine if items have be added, changed or removed. An error message will appear if the key attribute is not included.
import React, { Component } from 'react';
import { render } from 'react-dom';


class App extends Component {
  constructor() {
    super();
    this.state = {
      isOpen:false,
      dropItems:[
        'example 1',
        'example 2',
        'example 3'
      ]
    };
    this.onDropDown = this.onDropDown.bind(this);
  }

  onDropDown(){
    this.setState({isOpen: !this.state.isOpen});
  }

  render() {
    return (
      <div className="dropdown">
        <button onClick={this.onDropDown}>Drop down example</button>
        <div className="dropdown-content" style={{display:(this.state.isOpen)? "block":"none"}}>
          <ul>
          {
            this.state.dropItems.map(item => {
               return <li key={item}>{item}</li> 
            })
          }  
          </ul>
        </div>
      </div>
    );
  }
}

render(<App />, document.getElementById('root'));

Finally, the last example will load the drop down menu items dynamically from an external source. I will be basing this example on my previous post: Loading external data in ReactJS. I will again be using the random Chunk Norris joke generator API with the Axios library. The joke API currently has over 500 jokes, I have limited the number of jokes to appear to only 5.
import React, { Component } from 'react';
import { render } from 'react-dom';
import axios from 'axios';

class App extends Component {
  constructor() {
    super();
    this.state = {
      isOpen:false,
      dropItems:[]
    };
    this.onDropDown = this.onDropDown.bind(this);
  }

  onDropDown(){
    this.setState({isOpen: !this.state.isOpen});
  }

  componentDidMount(){
    axios.get("https://api.icndb.com/jokes").then((result) => {
        this.setState({dropItems: result.data.value});
    });
  }

  render() {
    return (
      <div className="dropdown">
        <button onClick={this.onDropDown}>Drop down example</button>
        <div className="dropdown-content" style={{display:(this.state.isOpen)? "block":"none"}}>
          <ul>
          {
            this.state.dropItems.map((item, index) => {
               if(index < 5){
                return <li key={item.id}>{item.joke}</li> 
               }
            })
          }  
          </ul>
        </div>
      </div>
    );
  }
}

render(<App />, document.getElementById('root'));

  COPYRIGHT © 2014 · ILIKE2FLASH · Theme by Ourblogtemplates

Back to TOP