I think my css classes the are imported but I have imported it correctly

Question

This is a burger builder project which I have been working on, here my error is in using css class file in the burger builder controls.

import React from 'react';
import classes from './BuildControls.css';
import BuildControl from './BuildControl/BuildControl';
const controls = [
    {label : 'Salad' , type :'salad'},
    {label : 'Bacon' , type :'bacon'},
    {label : 'Cheese' , type :'cheese'},
    {label : 'Meat' , type :'meat'},
];
const buildControls =(props) => { 
    <div className = {classes.BuildControls}>
        {controls.map(ctrl =>(
            <BuildControl Key ={ctrl.label} label={ctrl.label}/>
        ))}
    </div>
}

export default buildControls; 

THE ERROR IS

./src/components /Burger /BuildControls/BuildControls.js

Line 11: Expected an assignment or function call and instead saw an expression no-unused-expressions

Answer 1

const buildControls =(props) => {
return (
 <div className = {classes.BuildControls}>
    {controls.map(ctrl =>(
        <BuildControl Key ={ctrl.label} label={ctrl.label}/>
    )))}
 </div>
}

you need to return the elements.

Answer 2

You can import the css as follows:

import './BuildControls.css';

And then use the class as follows:

<div className="BuildControls">
</div>

Note: I am assuming your classname in the css file is BuildControls