We Keep Coding

React - I'm using the onclick option which requires a variable from a component that dynamically renders a series of elements, but it doesn't work

dropdownClick =(value ) => {
this.setState({searchGroup: value.name, elementSelected: value})
}
( I tried inserting the setState block inside the onClick and it do not worck too )
<InputGroup className="mb-2">
<Input value={this.state.searchGroup} onChange={(e) => this.filtergroups(e.target.value)} />
<InputGroupButtonDropdown addonType="append" isOpen={this.state.drop} toggle={this.AbrirCerrarDropdown} >
<DropdownToggle caret className="red button">Grupos</DropdownToggle>
<DropdownMenu>{this.state.skillGroupsFiltered.map((element, index) => (
<DropdownItem key={index} onClick={() => this.dropdownClick(element)}>{element.name}</DropdownItem>
))}
</DropdownMenu>
</InputGroup>

Homepage name appears behind the AppBar, How do I fix this?

I have an appBar and the homepage would appear behind the appbar. I wanted it to appear below it. This is what it looks like:
The AppBar codes:
const Header = () => {
const [value, setValue] = React.useState(0);
const handleChange = (event, newValue) => {
setValue(newValue);
};
//Breakpoints
const theme = useTheme();
const isMatch = useMediaQuery(theme.breakpoints.down("md"));
return (
<div>
<AppBar>
<Toolbar>
{/* //or just change this typography to an icon or picture */}
<Typography>Website</Typography>
{isMatch ? (
<h1>
<DrawerComponent />
</h1>
) : (
<Tabs
value={value}
indicatorColor="secondary"
onChange={handleChange}
aria-label="simple tabs example"
>
<Tab disableRipple label="Homepage" to="/" component={Link} />
<Tab disableRipple label="Login" to="/login" component={Link} />
<Tab disableRipple label="Settings" />
<Tab disableRipple label="Sample1" />
<Tab disableRipple label="Sample2" />
<Tab disableRipple label="Sample3" />
</Tabs>
)}
</Toolbar>
</AppBar>
</div>
);
};
export default Header;
I need to put a <br/> just to see the homepage:
const Homepage = (props) => {
return (
<section>
<br />
<h1>Homepage</h1>
</section>
);
};
export default Homepage;
And I have this drawerComponent for small screen sizes, it even got worse, you won't be able to see any message anymore not unless there will be a lot of <br/> before the message.
const DrawerComponent = () => {
const useStyles = makeStyles((theme) => ({
drawerContainer: {},
iconButtonContainer: {
marginLeft: "auto",
color: "white",
},
menuIconToggle: {
fontSize: "3rem",
},
link: {
textDecoration: "none",
},
}));
const [openDrawer, setOpenDrawer] = useState(false);
//Css
const classes = useStyles();
return (
<div>
<Drawer
anchor="left"
classes={{ paper: classes.drawerContainer }}
onClose={() => setOpenDrawer(false)}
open={openDrawer}
onOpen={() => setOpenDrawer(true)}
>
<List className={classes.link}>
<Link to="/">
<ListItem divider button onClick={() => setOpenDrawer(false)}>
<ListItemIcon>
<ListItemText> Homepage</ListItemText>
</ListItemIcon>
</ListItem>
</Link>
<Link to="/login">
<ListItem divider button onClick={() => setOpenDrawer(false)}>
<ListItemIcon>
<ListItemText> Login</ListItemText>
</ListItemIcon>
</ListItem>
</Link>
<ListItem divider button onClick={() => setOpenDrawer(false)}>
<ListItemIcon>
<ListItemText>Sample</ListItemText>
</ListItemIcon>
</ListItem>
<ListItem divider button onClick={() => setOpenDrawer(false)}>
<ListItemIcon>
<ListItemText> Sample</ListItemText>
</ListItemIcon>
</ListItem>
</List>
</Drawer>
<IconButton
edge="end"
className={classes.iconButtonContainer}
onClick={() => setOpenDrawer(!openDrawer)}
disableRipple
>
<MenuIcon className={classes.menuIconToggle} />
</IconButton>
</div>
);
};
export default DrawerComponent;

A way around this would be to add a margin-top or a padding-top to your homepage component equal to the height of the appbar.
Yet, a better approach would be ro use the following CSS properties on your appBar.
.app-bar {
position: sticky;
top: 0;
}
This will make your appbar stick to the top and will automatically adjust the height of its following DOM elements.

This post may answer your question: Creating a navbar with material-ui
You can either try:
Using CSS to implement padding-top (use "em" instead of "px" for a responsive padding height)
Reorganising your React components, making sure that the header (appbar) is not in the page, but rather a component at the same level (refer to the post linked above)

How to use multiple material ui dialog with React?

I want to use two dialog in sign up page and login page.
the implement that I want to do are signup screen showing up when click to sign up button on the Top page, and login screen showing up when click to login Button on signup page.
I wrote open state on App.js.
but the trouble is when it's written in App.js, two of modal open..
Does anyone know how to settle it?
App.js
const App = () => {
const [open, setOpen] = useState(false);
const handleClickOpen = () => {
setOpen(true);
};
const handleClose = () => {
setOpen(false);
};
return (
<div>
<Top handleClickOpen={handleClickOpen}/>
<SignupModal open={open} handleClose={handleClose} />
<LoginModal open={open} handleClose={handleClose} />
</div>
)
Top.js
const Top = (props) => {
const classes = useStyles();
return (
<React.Fragment>
<div style={style}>
<Button variant="outlined" className={classes.loginButton} onClick={props.handleClickOpen}>
Login
</Button>
</div>
<h1>Toppage</h1>
</React.Fragment>
);
}
SignupModal.js
const SignupModal = (props) => {
return (
<div>
<Dialog
open={props.open}
onClose={props.handleClose}
aria-labelledby="alert-dialog-title"
aria-describedby="alert-dialog-description"
>
<DialogTitle id="alert-dialog-title"　className={classes.title}>Sign up</DialogTitle>
<DialogContent className={classes.content}>
<div className={classes.text}>
<TextField id="standard-basic" label=“name” fullWidth/>
<TextField id="standard-basic" label=“email” fullWidth/>
<TextField id="standard-basic" label=“password” fullWidth/>
<TextField id="standard-basic" label=“pass”word fullWidth/>
</div>
</DialogContent>
<p className={classes.toLogin}>to Login</p>
<DialogActions>
<Button onClick={props.handleClose} className={classes.signUpButton}>
Send
</Button>
</DialogActions>
</Dialog>
</div>
);
}
LoginModal.ls
const LoginModal = (props) => {
return (
<div>
<Dialog
open={props.open}
onClose={props.handleClose}
aria-labelledby="alert-dialog-title"
aria-describedby="alert-dialog-description"
>
<DialogTitle id="alert-dialog-title"　className={classes.title}>Login</DialogTitle>
<DialogContent className={classes.content}>
<div className={classes.text}>
<TextField id="standard-basic" label=“name” fullWidth/>
<TextField id="standard-basic" label=“pass”word fullWidth}/>
</div>
</DialogContent>
<DialogActions>
<Button onClick={props.handleClose} className={classes.signUpButton}>
Login
</Button>
</DialogActions>
</Dialog>
</div>
);
}
export default LoginModal

You are sharing the state on both of your modals that's why.
The solution is simple, have 2 states; one that will determine if SignupModal is opened or not and another one for LoginModal.
const App = () => {
const [openLogin, setOpenLogin] = useState(false);
const [openSignup, setOpenSignup] = useState(false);
return (
<div>
<Top
onClickLogin={() => setOpenLogin(true)}
onClickSignup={() => setOpenSignup(true)}
/>
<SignupModal open={openLogin} handleClose={() => setOpenLogin(false)} />
<LoginModal open={openSignup} handleClose={() => setOpenSignup(false)} />
</div>
);
};
const Top = (props) => {
return (
<React.Fragment>
<div>
<Button
variant="outlined"
className={classes.loginButton}
onClick={props.onClickLogin}
>
Login
</Button>
<Button
variant="outlined"
className={classes.loginButton}
onClick={props.onClickSignup}
>
Signup
</Button>
</div>
<h1>Toppage</h1>
</React.Fragment>
);
};

Getting the value of selected item in Dropdown react-bootstrap

I want to get the value of selected item in Dropdown. I uses react-bootstrap. I tried placing onSelect={(e) => console.log(e)} at <Dropdown>, <Dropdown.Menu> and <Dropdown.Item> but on selecting one country all of above gives me null.
Dropdown and items are rendered correctly.
please help.
return (
<div>
<FormGroup className={styles.formControl}>
<Dropdown >
<Dropdown.Toggle variant="success" id="dropdown-basic">
Select a Country
</Dropdown.Toggle>
<Dropdown.Menu onSelect={(e) => console.log(e) } className={styles.dropdown_menu}>
{countries.map((country,i) => <Dropdown.Item key={i}>{country}</Dropdown.Item> )}
</Dropdown.Menu>
</Dropdown>
</FormGroup>
</div>
)

const [selectedItem, setSelectedItem] = useState(null);
return (
<div>
<FormGroup className={styles.formControl}>
<Dropdown >
<Dropdown.Toggle variant="success" id="dropdown-basic">
{selectedItem?selectedItem:"Select a country"}
</Dropdown.Toggle>
<Dropdown.Menu className={styles.dropdown_menu}>
{countries.map((country, i) => <Dropdown.Item onSelect={()=>setSelectedItem(country)} key={i}>{country}</Dropdown.Item> )}
</Dropdown.Menu>
</Dropdown>
</FormGroup>
</div>
)
I hope onSelect is the correct handler for the component. Just cross verify that. This should work I suppose.
useState(null) can also be useState(props.value) in case you're passing down something from parent. That's up to you.

Material-UI how to get the value of SelectField inside const

Actually, my Drawer has a few fields including SelectField but I stuck on getting the value and the onChange part of the Field. and here's my code:
const DrawerCargoAddItem = (props) => {
let { navDrawerOpen } = props;
return (
<Drawer docked={true} width={500} open={navDrawerOpen}>
<div style={styles.logo}>
Fleetcat Web
</div>
<div>
<PageBase title={<Link to="dashboard"><img src="./images/fleetcat.png"/></Link>} style={page}>
<SelectField
floatingLabelText="Category"
fullWidth={true}
value="">
<MenuItem key={0} primaryText="Food and Beverages"/>
<MenuItem key={1} primaryText="Medium"/>
<MenuItem key={2} primaryText="Large"/>
</SelectField>
<Paper style={papers} zDepth={5} >
<Link to="dashboard">
<FlatButton label="Tap to add Items" style={flatbutton}
onClick={() => { alert('foo');
console.log("Success");}}/>
</Link>
</Paper>
</PageBase>
</div>
</Drawer>
);
};
DrawerCargoAddItem.propTypes = {
navDrawerOpen: PropTypes.bool,
menus: PropTypes.array,
username: PropTypes.string,
};
export default DrawerCargoAddItem;

You create a simple function and what you need is a React Component:
import React from 'react';
export default class DrawerCargoAddItem extends React.Component {
state = {
value: 0
};
handleChange = (event, index, value) => this.setState({value});
render() {
let {navDrawerOpen} = this.props;
const {value} = this.state
return (
<Drawer docked={true} width={500} open={navDrawerOpen}>
<div style={styles.logo}>
Fleetcat Web
</div>
<div>
<PageBase
title={< Link to = "dashboard" > <img src="./images/fleetcat.png"/> < /Link>}
style={page}>
<SelectField
floatingLabelText="Category"
fullWidth={true}
value={value}
onChange={this.handleChange}>
<MenuItem value={0} key={0} primaryText="Food and Beverages"/>
<MenuItem value={1} key={1} primaryText="Medium"/>
<MenuItem value={2} key={2} primaryText="Large"/>
</SelectField>
<Paper style={papers} zDepth={5}>
<Link to="dashboard">
<FlatButton
label="Tap to add Items"
style={flatbutton}
onClick={() => {
alert('foo');
console.log("Success");
}}/>
</Link>
</Paper>
</PageBase>
</div>
</Drawer>
);
}
}
Basically you now have access to the full React lifecycle. The current value is now saved in the component's state.

Here it is
<SelectField floatingLabelText="Category"
fullWidth={true}
value=""
onChange={this.handleChanges}>
<MenuItem key={0} value="Food and Beverages" primaryText="Food"/>
<MenuItem key={1} value="Medium" primaryText="Medium"/>
<MenuItem key={2} value="Large" primaryText="Large"/>
</SelectField>
here is handle change event function which should be written:
handleChanges = (e, index, value) => {
alert(value);
}

For me worked this syntax : onBlur={event => { handleChange(event) } }
<Autocomplete
id="size-small-standard"
size="small"
options={lOrigens}
defaultValue={{ title: props.value }}
getOptionLabel={option => option.title}
onBlur={e => { handleChange(e, props, { setChanging: setCurrentChangingItem1, i}) }}
renderInput={params => (
<TextField
{...params}
variant="standard"
label="Origens1"
placeholder="Origens2"
fullWidth
/>
)}
/>
And to access the value: event.target.value