We Keep Coding

How to use reactjs material ui GRID layout

I'm trying to use #mui/material/Grid layout for a use case,
In my Report component, I want to have the Bar and Line charts in one block
and the Doughnut and PolarArea charts in another,
I tried applying CSS by adding, style = {{display: "inline-block"}},
But the UX looks like this -
By code is like this on a high level -
App.js -
function App() {
return (
<Router>
<Container style={{backgroundColor: '#F3F4F6'}}>
<Grid container spacing={0.5} >
<Grid item xs={12}>
<Routes>
<Route path='/' element={<SignIn />}/>
<Route path='/dashboard' element={<Dashboard/>}/>
</Routes>
</Grid>
</Grid>
</Container>
</Router>
);
}
Dashboard.js component -
const Dashboard = () => {
return (<>
<Grid item xs={12}>
<Table/>
</Grid>
<Grid item xs={12}>
<Report/>
</Grid>
</>
)}
Report.js component -
export function Report() {
return <>
<Grid item xs={6}>
<Bar options={barChartOptions} data={barChartData} style={{backgroundColor: 'white'}}/>
</Grid>
<Grid item xs={6}>
<Line options={areaChartOptions} data={areaChartData} style={{backgroundColor: 'white'}}/>
</Grid>
<Grid item xs={6}>
<Doughnut options={doughnutOptions} data={doughnutChatData} style={{backgroundColor: 'white'}}/>
</Grid>
<Grid item xs={6}>
<PolarArea options={polarAreaOptions} data={polarAreaData} style={{backgroundColor: 'white'}}/>
</Grid>
<Grid item xs={12}>
<Bar options={groupedBarOptions} data={groupedBarData} style={{backgroundColor: 'white'}}/>
</Grid>
</>
}

You should wrap up the Grid items with a Grid container.
export function Report() {
return <>
<Grid container>
<Grid item xs={6}>
<Bar options={barChartOptions} data={barChartData} style={{backgroundColor: 'white'}}/>
</Grid>
<Grid item xs={6}>
<Line options={areaChartOptions} data={areaChartData} style={{backgroundColor: 'white'}}/>
</Grid>
</Grid>
<Grid container>
<Grid item xs={6}>
<Doughnut options={doughnutOptions} data={doughnutChatData} style={{backgroundColor: 'white'}}/>
</Grid>
<Grid item xs={6}>
<PolarArea options={polarAreaOptions} data={polarAreaData} style={{backgroundColor: 'white'}}/>
</Grid>
</Grid>
<Grid item xs={12}>
<Bar options={groupedBarOptions} data={groupedBarData} style={{backgroundColor: 'white'}}/>
</Grid>
</>
}

Unable to get a dropdown value using reactjs

I'm new to reactjs. I have created a dropdown for a company list and want to get values. I still couldn't be able to get values from the dropdown. I've tried several methods of retrieving data but not able to do that. can anyone help me to get values? Here is some of my code.
<Grid container spacing={3}>
<Grid item xs={12} sm={6}>
<SoftBox mb={1} ml={0.5} lineHeight={0} display="inline-block">
<SoftTypography
component="label"
variant="caption"
fontWeight="bold"
textTransform="capitalize">
Country
</SoftTypography>
</SoftBox>
<Select input={<SoftInput />} value={country} onChange={handleSetCountry}>
<MenuItem value="...">country</MenuItem>
<MenuItem value="10">Hello 10</MenuItem>
<MenuItem value="11">Hello 11</MenuItem>
<MenuItem value="12">Hello 12</MenuItem>
</Select>
</Grid>
Here is my whole code.
/**
=========================================================
* Soft UI Dashboard PRO React - v4.0.0
=========================================================
* Product Page: https://material-ui.com/store/items/soft-ui-pro-dashboard/
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
Coded by www.creative-tim.com
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
import { useState } from "react";
// prop-type is a library for typechecking of props
import PropTypes from "prop-types";
// #mui material components
import Grid from "#mui/material/Grid";
import Select from "#mui/material/Select";
import MenuItem from "#mui/material/MenuItem";
// Soft UI Dashboard PRO React components
import Switch from "#mui/material/Switch";
import SoftBox from "components/SoftBox";
import SoftTypography from "components/SoftTypography";
import SoftInput from "components/SoftInput";
// NewUser page components
import FormField from "layouts/pages/new/new-company/components/FormField";
import { DateTimePicker } from "#material-ui/pickers";
import { distance } from "chroma-js";
function General({ formData }) {
const [country, setCountry] = useState("...");
const handleSetCountry = (event) => setCountry(event.target.value);
const { formField, values, errors, touched } = formData;
const { comNumber, address1, address2, city, state, postcode, additional, phone, phone1, fax, web } = formField;
const { comNumber: comNumberV, address1: address1V, address2: address2V, city: cityV, state: stateV, postcode: postcodeV, additional: additionalV,
phone: phoneV, phone1: phone1V, fax: faxV, web: webV} = values;
const [selectedDate, handleDateChange] = useState(new Date());
const [rememberMe, setRememberMe] = useState(false);
const handleSetRememberMe = () => setRememberMe(!rememberMe);
return (
<SoftBox>
<SoftTypography variant="h5" fontWeight="bold">
General
</SoftTypography>
<SoftBox mt={1.625}>
<Grid container spacing={3}>
<Grid item xs={12} sm={6}>
<FormField
type={comNumber.type}
label={comNumber.label}
name={comNumber.name}
value={comNumberV}
placeholder={comNumber.placeholder}
error={errors.comNumber && touched.comNumber}
success={comNumberV.length > 0 && !errors.comNumber}
/>
</Grid>
<Grid item xs={12} sm={6}>
<FormField
type={address1.type}
label={address1.label}
name={address1.name}
value={address1V}
placeholder={address1.placeholder}
/>
</Grid>
</Grid>
<Grid container spacing={3}>
<Grid item xs={12} sm={6}>
<FormField
type={address2.type}
label={address2.label}
name={address2.name}
value={address2V}
placeholder={address2.placeholder}
/></Grid>
<Grid item xs={12} sm={6}>
<FormField
type={city.type}
label={city.label}
name={city.name}
value={cityV}
placeholder={city.placeholder}
/>
{/* <FormField
type={city.type}
label={city.label}
name={city.name}
value={cityV}
placeholder={city.placeholder}
error={errors.city && touched.city}
success={cityV.length > 0 && !errors.city}
/> */}
</Grid>
</Grid>
{/* <Grid item xs={6} sm={3}>
<SoftBox mb={1} ml={0.5} lineHeight={0} display="inline-block">
<SoftTypography
component="label"
variant="caption"
fontWeight="bold"
textTransform="capitalize"
>
State
</SoftTypography>
</SoftBox>
<Select input={<SoftInput />} value={state} onChange={handleSetState}>
<MenuItem value="...">state</MenuItem>
<MenuItem value="10">Hello 10</MenuItem>
<MenuItem value="11">Hello 11</MenuItem>
<MenuItem value="12">Hello 12</MenuItem>
</Select>
</Grid>
<Grid item xs={6} sm={3}>
<FormField
type={zip.type}
label={zip.label}
name={zip.name}
value={zipV}
placeholder={zip.placeholder}
error={errors.zip && touched.zip}
success={zipV.length > 0 && !errors.zip}
/>
</Grid>
</Grid> */}
<Grid container spacing={3}>
<Grid item xs={12} sm={6}>
<FormField
type={state.type}
label={state.label}
name={state.name}
value={stateV}
placeholder={state.placeholder}
/>
</Grid>
<Grid item xs={12} sm={6}>
<FormField
type={postcode.type}
label={postcode.label}
name={postcode.name}
value={postcodeV}
placeholder={postcode.placeholder}
error={errors.postcode && touched.postcode}
success={postcodeV.length > 0 && !errors.postcode}
/>
</Grid>
</Grid>
<Grid container spacing={3}>
<Grid item xs={12} sm={6}>
<SoftBox mb={1} ml={0.5} lineHeight={0} display="inline-block">
<SoftTypography
component="label"
variant="caption"
fontWeight="bold"
textTransform="capitalize">
Country
</SoftTypography>
</SoftBox>
<Select input={<SoftInput />} value={country} onChange={handleSetCountry}>
<MenuItem value="...">country</MenuItem>
<MenuItem value="10">Hello 10</MenuItem>
<MenuItem value="11">Hello 11</MenuItem>
<MenuItem value="12">Hello 12</MenuItem>
</Select>
</Grid>
<Grid item xs={12} sm={6}>
<FormField
type={additional.type}
label={additional.label}
name={additional.name}
value={additionalV}
placeholder={additional.placeholder}
/>
</Grid>
</Grid>
<Grid container spacing={3}>
<Grid item xs={12} sm={6}>
<FormField
type={phone.type}
label={phone.label}
name={phone.name}
value={phoneV}
placeholder={phone.placeholder}
error={errors.phone && touched.phone}
success={phoneV.length > 0 && !errors.phone}
/>
</Grid>
<Grid item xs={12} sm={6}>
<FormField
type={phone1.type}
label={phone1.label}
name={phone1.name}
value={phone1V}
placeholder={phone1.placeholder}
error={errors.phone1 && touched.phone1}
success={phone1V.length > 0 && !errors.phone1}
/>
</Grid>
</Grid>
<Grid container spacing={3}>
<Grid item xs={12} sm={6}>
<FormField
type={fax.type}
label={fax.label}
name={fax.name}
value={faxV}
placeholder={fax.placeholder}
/>
</Grid>
<Grid item xs={12} sm={6}>
<FormField
type={web.type}
label={web.label}
name={web.name}
value={webV}
placeholder={web.placeholder}
/>
</Grid>
</Grid>
{/* <Grid container spacing={3}>
<Grid item xs={12} >
<FormField
type={distance.type}
label={distance.label}
name={distance.name}
value={distanceV}
placeholder={distance.placeholder}
/>
</Grid>
</Grid>
<SoftBox display="flex" alignItems="center">
<Switch checked={rememberMe} onChange={handleSetRememberMe} />
<SoftTypography
variant="button"
fontWeight="regular"
onClick={handleSetRememberMe}
sx={{ cursor: "pointer", userSelect: "none" }}
>
Company Opted Out From Surveys
</SoftTypography>
</SoftBox> */}
</SoftBox>
</SoftBox>
);
}
// typechecking props for Address
General.propTypes = {
formData: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).isRequired,
};
export default General;
I need to get dropdown values. Can anyone help me to solve this?

First of all, you should really create a small example in Codesandbox and post it here...
Anyway,
As far as I can see you have two different dropdowns/select components (state and country).
You get no value from neither of them ? The Country one seems to be okay, but the State is missing its event handler (?).
What does a simple console.log output show?:
const handleSetCountry = (event) => {
console.log(event.target.value);
setCountry(event.target.value);
}
Also, try without the
input={<SoftInput />}
and see what happens

With the Material-UI Grid, how can I make these into 5 columns in one row?

I have these 5 columns where I wanted them to be in one row. However, so far, this is what I got:
How do I make all of the columns be in one row?
I have also recreated this in my codesandbox: https://codesandbox.io/s/5-columns-in-one-row-0mym3j
Below are the codes:
codes:
<Container style={{ marginTop: "1rem", marginBottom: "1rem" }}>
<Box sx={{ "& h1": { m: 0 } }}>
<Grid container spacing={2} justify="flex-start">
<Grid item xs={12} sm={6} md={4} lg={3}>
<Card>
<CardContent>
<Stack direction="row" spacing={2}>
<Typography variant={"h6"} gutterBottom>
Column 1
</Typography>
</Stack>
</CardContent>
</Card>
</Grid>
<Grid item xs={12} sm={6} md={4} lg={3}>
<Card>
<CardContent>
<Stack direction="row" spacing={2}>
<Typography variant={"h6"} gutterBottom>
Column 2
</Typography>
</Stack>
</CardContent>
</Card>
</Grid>
<Grid item xs={12} sm={6} md={4} lg={3}>
<Card>
<CardContent>
<Stack direction="row" spacing={2}>
<Typography variant={"h6"} gutterBottom>
Column 3
</Typography>
</Stack>
</CardContent>
</Card>
</Grid>
<Grid item xs={12} sm={6} md={4} lg={3}>
<Card>
<CardContent>
<Stack direction="row" spacing={2}>
<Typography variant={"h6"} gutterBottom>
Column 4
</Typography>
</Stack>
</CardContent>
</Card>
</Grid>
<Grid item xs={12} sm={6} md={4} lg={3}>
<Card>
<CardContent>
<Stack direction="row" spacing={2}>
<Typography variant={"h6"} gutterBottom>
Column 5
</Typography>
</Stack>
</CardContent>
</Card>
</Grid>
</Grid>
</Box>
</Container>

You can use wrap="nowrap" so that the item will stay in the same row.
<Grid container wrap="nowrap" sx={{ flexDirection: { xs: "column", md: "row" }}} spacing={2} justify="flex-start">
<Grid item xs={12} sm={6} md={4} lg={3}>
<Card>
.
.
.
</Card>
</Grid>
</Grid>

Problem with using Material UI <Grid> for two column layout

I'm trying to achieve a two column layout, both of them equal height and each taking half of the screen. Picture explains it better, here is one.
The not working code is as follows:
import React from "react";
import { makeStyles } from "#material-ui/core/styles";
import CssBaseline from "#material-ui/core/CssBaseline";
import Grid from "#material-ui/core/Grid";
import Paper from "#material-ui/core/Paper";
const useStyles = makeStyles(theme => ({
root: {
flexGrow: 1,
alignItems: "stretch"
},
column: {
flexDirection: "column"
},
paper: {
padding: theme.spacing(2),
textAlign: "center",
color: theme.palette.text.secondary
}
}));
export default props => {
const classes = useStyles();
return (
<>
<CssBaseline />
<Grid container className={classes.root}>
{/* COLUMN ONE */}
<Grid container item className={classes.column}>
<Grid item xs={6}>
<Paper className={classes.paper}>1: xs=6</Paper>
</Grid>
<Grid item xs={6}>
<Paper className={classes.paper}>1: xs=6</Paper>
</Grid>
<Grid container item>
<Grid item xs={3}>
<Paper className={classes.paper}>1: xs=3 left</Paper>
</Grid>
<Grid item xs={3}>
<Paper className={classes.paper}>1: xs=3 right</Paper>
</Grid>
</Grid>
</Grid>
{/* COLUMN TWO */}
<Grid container item className={classes.column}>
<Grid item xs={6}>
<Paper className={classes.paper}>2: xs=6</Paper>
</Grid>
<Grid item xs={6}>
<Paper className={classes.paper}>2: xs=6</Paper>
</Grid>
</Grid>
</Grid>
</>
);
};
Obligatory codesandbox is here.
Could someone explain me what am I doing wrong here?

There's a bug with Material UI way of laying out nested grid containers, here. The workaround - found by #londonoliver - is to nest containers inside the grid items:
<Grid container direction="row">
<Grid item>
<Grid container direction="column">
<Grid item>1</Grid>
<Grid item>2</Grid>
</Grid>
</Grid>
<Grid item>
<Grid container direction="column">
<Grid item>3</Grid>
<Grid item>4</Grid>
</Grid>
</Grid>
</Grid>

How to place <Grid element> above other components in React's material-ui in a <Grid>

How can we place component above other components without braking responsive layout?
I have such layout:
<Grid container justify='center'>
<Grid item style={{ height: '100vh', width: '100%' }}>
... some background elements ...
</Grid>
<Grid item xs={12} sm={8} md={6} lg={4}>
... some input element on paper ...
</Grid>
</Grid>
I've tried to set position: absolute:
<Grid item xs={12} sm={8} md={6} lg={4} style={{position: 'absolute'}}>
It works but breaks the xs={12} sm={8} md={6} lg={4} breakpoint changes
How can I place one Grid item above other Grid item in a Grid? (material-ui.com)