Q: how to concatenate styles I think the error is in this part, sorry I'm new to react
{styles.navbar navbar-default}

this is my code

import styles from './Header.scss';

class Header extends Component {

render() { return (
  <nav className={styles.navbar navbar-default}>

  </nav>
    );
  }
}

enter image description here

A: I think it has to be 
<nav className={styles.navbar,styles.navbar-default}></nav>

Or you can also try this. In this case the second property will override same style property in styles.navbar
<nav className=style={Object.assign({}, styles.navbar, styles.navbar-default)}></nav>


A: So you have a scss as below 
export default {
     navbar: "navbar-default"
}

Assuming you have used named/default export from your scss file, you have to use the variables from file as below:
import styles from './Header.scss';

class Header extends Component {
render() { return (
  <nav className={styles.navbar}>
  </nav>
    );
  }
}

