Github Battle Navbar

Popular.js

// Here i am trying to render a list into my React component 

// obviously start with an array
// Apparently this code does not work, because the code block is not wrapped inside a Div
  render() {
    const languages = ['All', 'Ruby', 'Javascript']
    return (
      {languages.map((language) => (
        <h1>language</h1>
      ))}
    )
  }

// By wrapping it inside a div, it works!
<div>  
  return (
      {languages.map((language) => (
        <h1>language</h1>
      ))}
    )
</div>

//18 June 2019 

// Managed to show the list in html file.
// But i need to make the list show up properly by adding CSS 
// Question is to add css to ul or div wrapping the list. 

// Add CSS to the ul 
.flex-center{ 
  display: flex; 
  justify-content: center;
  align-items: center;
}

.btn-clear {
 border: none;
 background: transparent;
}

// Something i learnt today which i think will be valuable.
handleClick (language) {
 console.log(language) 
}

// this will cause the function to be invoked immediately
<button onClick={ this.handleClick(language) }></button>

//this returns a function to be invoked!
<button onClick={ () => this.handleClick(language)>
                 
 // Another thing i learnt today 
 // object destructuring needs to follow the exact key/name in state
this.state = {
selectedLanguage: 'All'
}                 

// this will result in undefined.
const { selected } = this.state

// using fetch API 
// fetch returns a promise 
fetch(endpoint)
.then((response) => response.json())

// Things to finish tomorrow create ReposGrid