How to add a   in a map-function in Javascript?

Question

Working in React I stumbled across this problem:

 <Grid item>
    {
        rolePriorities.map((rp, index) => (
                <Chip key={index} label={rp} color="primary" sx={{ color: "whitesmoke" }} />  &nbsp; //error happens here
        ))
    }
</Grid>

This doesn't work as it doesn't compile (Parsing error: Unexpected token, expected ",")

I've also tried with a + , putting it in parentheses, using the String code String.fromCharCode(160) , but none of them have worked so far. It compiles with a <div/> around it, but I want the chips to be in the same line and not stacked on each other.

Anybody know how I could put a whitespace between the Array -items without making them stack?

Answer 1

You need to wrap it into a Fragment because in this way technically you are trying to return 2 children in one jsx which is not allowed.

 <Grid item>
    {
        rolePriorities.map((rp, index) => (
               <>
                <Chip key={index} label={rp} color="primary" sx={{ color: "whitesmoke" }} />
                &nbsp;
               </>
        ))
    }
</Grid>