Material UI: Grid does not put select in row

Question

I'm new in full stack developing and I'm trying to code something to understand better frontend with React JS and Material UI. I've write a page that shows posts in backend but I want to Select Items all in a row, on Material UI website I've read that I've to write like this in order to show elements in a row:

Marketplace.js

import { Grid } from '@material-ui/core'
import React, { Component } from 'react'
import PropTypes from 'prop-types'

import regioni from '../utils/where'

import Adv from '../components/marketplace/Adv';
import NewAdv from '../components/marketplace/NewAdv';
import Profile from '../components/profile/Profile';
import PostSkeleton from '../utils/PostSkeleton';

import Select from '@material-ui/core/Select';
import Input from '@material-ui/core/Input';
import InputLabel from '@material-ui/core/InputLabel';
import MenuItem from '@material-ui/core/MenuItem';
import TextField from '@material-ui/core/TextField';
import Radio from '@material-ui/core/Radio';
import RadioGroup from '@material-ui/core/RadioGroup';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import Button from '@material-ui/core/Button';

import FormLabel from '@material-ui/core/FormLabel';
import { connect } from 'react-redux';

 
 class marketplace extends Component {
    state = {
        query:'',
        errors:{},
        type:'Vendo',
        title:'',
        product:'Singole',
        body:'',
        regione:'Abruzzo',
        provincia:'',
    };
    componentDidMount(){
        const {
            user:{
                authenticated, credentials:{
                    handle,
                    ygo,
                    mtg,
                    kf
                }
            }} = this.props;
        
    render() {
       
        return (
           <Grid container>
               <Grid item sm={4} xs={12}>
                <Profile/>
               </Grid>
               <Grid item sm={8} xs={12}>
               <TextField
                    name="search"
                    floatingLabelText="Cerca"
                    value={this.state.query}
                    onChange={this.searchChange}
                    />
                    <Button type="submit" variant="contained" color="primary" onClick={this.handleSearch}>
                        Cerca
                    </Button>
                    <Grid item  xs={6} sm={3} >
                    <FormLabel component="legend">Tipo</FormLabel>
                                <RadioGroup aria-label="Tipo" name="type" color="primary" value={this.state.type} onChange={this.radioTypeChange}>
                                    <FormControlLabel value="Vendo" control={<Radio />} label="Vendo" />
                                    <FormControlLabel value="Scambio" control={<Radio />} label="Scambio" />
                                    <FormControlLabel value="Cerco" control={<Radio />} label="Cerco" />
                                </RadioGroup>

                    </Grid>

                    <Grid item xs={6} sm={3}>
                    <FormLabel component="legend">Prodotto</FormLabel>
                                <RadioGroup aria-label="Prodotto" name="product" color="primary" value={this.state.product} onChange={this.radioProductChange}>
                                    <FormControlLabel value="Singole" control={<Radio />} label="Singole" />
                                    <FormControlLabel value="Lista" control={<Radio />} label="Lista" />
                                    <FormControlLabel value="Sigillato" control={<Radio />} label="Sigillato" />
                                    <FormControlLabel value="Accessori" control={<Radio />} label="Accessori" />
                                </RadioGroup>
                    </Grid>

                    <Grid item xs={6} sm={3}>
                    <InputLabel id="regioni">Regione</InputLabel>
                                        <Select
                                            labelId="Regione"
                                            id="regioni"
                                            value={this.state.regione}
                                            onChange={this.regionChange}
                                            input={<Input />}
                                            MenuProps={MenuProps}
                                        >
                                        {regioni.map((regione) => (
                                            <MenuItem value={regione.regioneName}>
                                            {regione.regioneName}
                                            </MenuItem>
                                        ))}
                                        </Select>
                    </Grid>

                    <Grid item xs={6} sm={3}>
                    <InputLabel id="demo-simple-select-label">Provincia</InputLabel>
                                            <Select
                                                labelId="demo-simple-select-label"
                                                id="demo-simple-select"
                                                value={this.state.provincia}
                                                onChange={this.whereChange}
                                                disabled={!this.state.regione}
                                            >
                                                {this.state.regione
                                                    ? regioni
                                                        .find(({ regioneName }) => regioneName === this.state.regione)
                                                        .province.map((prov) => (
                                                            <MenuItem value={prov.name}>
                                                                {prov.name}
                                                            </MenuItem>
                                                        ))
                                                    : []}
                                            </Select>
                    </Grid>

                <Button type="submit" variant="contained" color="primary" onClick={this.handleFilter}>
                        filter
                    </Button>
                    <Button type="submit" variant="contained" color="primary" onClick={this.handleReset}>
                        Reset
                       
                    </Button>
                <NewAdv game={game}/>
                {recentAdvsMarkup}
               </Grid>
               <Grid item sm={4} xs={12}>
                
               </Grid>
           </Grid>
        )
    }
}

marketplace.propTypes={
    data: PropTypes.object.isRequired,
    user: PropTypes.object.isRequired
}

const mapStateToProps = state =>({
    data: state.data,
    user: state.user,
    game: state.UI
})

export default connect(mapStateToProps,)(marketplace)

But they were showed in a columb. How can I do?

Answer 1

You can wrap elements in a Box Material UI component.

<Box display="flex" flexDirection="row">
  <Box>
    // Element
  </Box>
  <Box>
    // Element
  </Box>
</Box>