Showing another paper if the first paper is full with React - javascript

I have a paper element (div with A4 size), displaying informations enterred by the user (using Context API in Reactjs).
What I want is, in case the paper element is full of text, add another paper and display the remaining informations in it.
this is my code.
<Paper>
<div class="page" data-size="A4">
<Grid container xs={12} direction="column" justify="center" >
<Typography className={classes.title} variant="h5">Experiences </Typography>
<personalInfo.Consumer>
{( {experience} ) => (
experience.map((exp,i) => {
return(
<div key={i}>
<Grid container xs={12} spacing={false}>
<Grid xs={3}>
<Typography className={classes.dates}>
{exp.startdate}-{exp.enddate}<br/>
{exp.city},{exp.country}
</Typography>
</Grid>
<Grid xs={8}>
<Typography >
<h4>{exp.job}</h4>
{exp.employer}
<br/>
{exp.description}
</Typography>
</Grid>
</Grid>
</div>
)})
)}
<personalInfo.Consumer>
</Grid>
</div>
</Paper>```

Related

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

How to centre Material-UI Grid Components

This post has been resolved
Hi, I'm using Material-UI in my React App, and I want to centre a Grid item that contains a Card and two more Grid items.
Here is the relevant code. The Cards do appear in the middle of the screen, but they aren't centred and it's really, really annoying me.
Screenshot:
Necessary code:
render() {
return (
<Grid container>
<Grid item xs={12}>
<Typography variant="h3" gutterBottom>
My Projects
</Typography>
</Grid>
<Grid item xs={6} justify="center">
<Grid item xs={12}>
<Card>
<CardMedia
component="img"
height="140"
image="https://github.com/dbarnes18/Portfolio/blob/master/assets/images/spotter.png?raw=true"
alt="Spotter"
/>
<CardContent>
<Typography gutterBottom variant="h5" component="div">
Spotter
</Typography>
<Typography variant="body2" color="text.secondary">
Spotter is an easy-to-use Spotify music controller with
functioning room and voting systems.
</Typography>
</CardContent>
<CardActions>
<Button
size="small"
color="primary"
to="/project/spotter"
component={Link}
>
Read More
</Button>
</CardActions>
</Card>
</Grid>
<Grid item xs={12}>
<br />
</Grid>
<Grid item xs={12}>
<Card>
<CardMedia
component="img"
height="140"
image="https://github.com/dbarnes18/Portfolio/blob/master/assets/images/impulse.png?raw=true"
alt="Spotter"
/>
<CardContent>
<Typography gutterBottom variant="h5" component="div">
Impulse
</Typography>
<Typography variant="body2" color="text.secondary">
Impulse is a macOS Virtual/Voice Assistant!{" "}
<i>Impulse is a little buggy and slow.</i>
</Typography>
</CardContent>
<CardActions>
<Button
size="small"
color="primary"
to="/project/impulse"
component={Link}
>
Read More
</Button>
</CardActions>
</Card>
</Grid>
</Grid>
</Grid>
);
}
Some system info:
Google Chrome: 93.0.4577.82 (Official Build) (x86_64)
Revision: e3a25d9b9e2d0b728e045ec87c0aa4942aa46e4e-refs/branch-heads/4577#{#1237}
OS: macOS Version 10.15.7 (Build 19H1417)
JavaScript: V8 9.3.345.19
Thanks!
As you say using material-ui
just add style to your code
material-ui v4.12.3
import { makeStyles } from "#material-ui/core/styles";
const useStyles = makeStyles(() => ({
root: {
display: "flex",
justifyContent: "center",
alignItem: "center"
}
}));
and add it to your Grid
export default function App() {
const classes = useStyles();
return (
<Grid container className={classes.root}>
....
)}
check out here
The simpliest answer it's to a div with name of .container and give it width:100% and display:flex;justify-content:center;gap:20px and that's it.
here preview : https://codesandbox.io/s/vigilant-bird-ulpvm?file=/index.html

Using Matrial UI grid, but Justify props is not working?

Here, justify is not working for me. any guess why?
<Grid container direction='column' alignItems='center' justify='center' spacing='1'>
<Grid item xs={12}>
<Typography variant='h1'>Firt Item</Typography>
</Grid>
<Grid item xs={12}>
<Typography variant='h4'>Firt Item</Typography>
</Grid>
<Grid item xs={12}>
<Typography variant='h6'>Firt Item</Typography>
</Grid>
</Grid>
It's working as supposed to be. The problem is the height of the Grid component is equal to the height of its children together. As a result, changes in the justify value is not visible when direction='column'. So I set the height of the Grid component to 300px as below:
<Grid
style={{ height: "300px" }}
container
direction="column"
alignItems="center"
justify="flex-end"
>
to make changes visible here in sandbox

Material UI in React: make <Paper> Component clickable

I want to make a Paper component clickeable. How can I achieve this? I tried setting an id property in the tag like () and then using the DOM to add an event listener but it does not work. I'm stuck and out of ideas on how to add a click to the Paper component.
Please note that Paper is a div so I don't get why I can't add a click event. Thanks.
My code:
<span>
<Grid item xs={12} sm={12} md={6} lg={4} xl={4} spacing={5} key={something}>
<Paper className={classes.paper} onClick={}>
....
</Paper>
</Grid>
</span>
Try wrapping the paper component using IconButton:
<span>
<Grid item xs={12} sm={12} md={6} lg={4} xl={4} spacing={5} key={something}>
<IconButton>
<Paper className={classes.paper} onClick={}>
....
</Paper>
</IconButton>
</Grid>
</span>
As #TigranPetrosyan said, they're not intended to be displayed like buttons, but you can use Card components which look similar to Paper, but can be clickable.
<span>
<Grid item xs={12} sm={12} md={6} lg={4} xl={4} spacing={5} key={something}>
<Card sx={{ maxWidth: 345 }}>
<CardActionArea>
<CardContent onClick={() => console.log('Clicked!')}>
<Typography gutterBottom variant="h5" component="div">
Lizard
</Typography>
<Typography variant="body2" color="text.secondary">
Lizards are a widespread group of squamate reptiles, with over 6,000
species, ranging across all continents except Antarctica
</Typography>
</CardContent>
</CardActionArea>
</Card>
</Grid>
</span>
Example taken from the V5 docs, I just added the onClick event listener.

Setting onClick to false

I currently have a table using a slider to provide additional details for a table. When the slider component opens I have an X to close to the slider. I am attempting to have that X close the slider and have the table in its original form appear.
Here is a code sandbox:
code sandbox
Slider component :
function ExpandToggle(isOpenProps) {
const [isOpen, setIsOpen] = useState(false);
const toggle = () => {
setIsOpen(!isOpen);
};
return (
<>
<Button>
<ArrowForwardIosIcon size="small" onClick={toggle} />{" "}
</Button>
<SliderInfo open={isOpen} />
</>
);
}
SliderInfo component with onClick={open=false}
export default function SliderInfo({ open }) {
const classes = useStyles();
return (
<Slide direction="left" in={open} mountOnEnter unmountOnExit>
<div className={classes.root}>
<Grid container>
<Grid item>
<Typography variant="h6">Vanila Ice Cream</Typography>
</Grid>
<Grid item>
<Typography variant="h6">Chocolate Ice Cream</Typography>
</Grid>
<Grid item>
<Typography variant="h6">Strawberry Ice Cream</Typography>
</Grid>
<Grid item>
<Typography variant="h6">Sherbert </Typography>
</Grid>
<Grid item>
<Typography variant="h6">None</Typography>
</Grid>
<Grid item>
<Button>
<CloseIcon onClick={open=false} />
</Button>
</Grid>
</Grid>
</div>
</Slide>
On CloseIcon I have an onClick that i'm trying to set open which is passed from Slider to false so it can close the slider component. At the moment upon clicking on the CloseIcon it is not do anything.
Don't modify props directly.
Pass in the toggle function just like you passed in the open variable, and call it instead.
<SliderInfo open={isOpen} toggleOpen={toggle} />
// In Sliderinfo
export default function SliderInfo({ open, toggleOpen }) {
...
<CloseIcon onClick={toggleOpen} />
If your toggle doesn't serve the same purpose, create a new function that only sets isOpen to false and use it instead.
Also remember that onClick expects a function. So the open=false is actually getting executed during render, not after a click. Correct inline format would be onClick={(e) => {//do stuff}}.
You can pass a callback function to the Slider that can call your setIsOpen state modifier, and then pass it to onClick:
function ExpandToggle(isOpenProps) {
const [isOpen, setIsOpen] = useState(false);
const toggle = () => {
setIsOpen(!isOpen);
};
return (
<>
<Button>
<ArrowForwardIosIcon size="small" onClick={toggle} />{" "}
</Button>
<SliderInfo open={isOpen} onRequestClose={() => { setIsOpen(false) }} />
</>
);
}
export default function SliderInfo({ open, onRequestClose }) {
const classes = useStyles();
return (
<Slide direction="left" in={open} mountOnEnter unmountOnExit>
<div className={classes.root}>
<Grid container>
<Grid item>
<Typography variant="h6">Vanila Ice Cream</Typography>
</Grid>
<Grid item>
<Typography variant="h6">Chocolate Ice Cream</Typography>
</Grid>
<Grid item>
<Typography variant="h6">Strawberry Ice Cream</Typography>
</Grid>
<Grid item>
<Typography variant="h6">Sherbert </Typography>
</Grid>
<Grid item>
<Typography variant="h6">None</Typography>
</Grid>
<Grid item>
<Button>
<CloseIcon onClick={onRequestClose} />
</Button>
</Grid>
</Grid>
</div>
</Slide>

Categories