I read about Material-UI and trying to make two components sid by side and that is the default as I understand but whatever I try it looks like this:
Material Grid refused to go horizontal even it’s default behavior. I even tried with something super simple like this:
<Grid container>
<Grid item xs={6} sm={2} md={8} lg={12} xl={3} style={{background:randomColor()}}>
Hooray something is here!
</Grid>
<Grid item xs={6} sm={10} md={4} lg={12} xl={9} style={{background:randomColor()}}>
Hooray something is too!
</Grid>
</Grid>
And that code writes the text vertically.
This is my code. I must be doing something fundamentally wrong, but I can’t see it.
import React, { Component } from "react";
import { connect } from "react-redux";
import { bindActionCreators } from "redux";
import Input from "../components/input/Input";
import Button from "../components/button/Button";
import { withStyles } from "@material-ui/styles";
import { Grid, Page, Container, makeStyles } from "@material-ui/core";
import { actionCreators, clearPosts } from "../redux/books/books.action";
import EnhancedTable from "./Logger";
const marginStyle = {
marginTop: "30px",
};
const styles = (theme) => ({
root: {
flexGrow: 1,
},
productCard: {
height: "100%",
},
border: {
bgcolor: "background.paper",
borderColor: "text.primary",
m: 1,
border: 1,
style: { width: "5rem", height: "5rem" },
},
});
class FormContainer extends Component {
constructor(props) {
super(props);
this.state = {
localBook: {
title: "",
author: "",
genre: "",
price: "",
},
};
this.handleTitle = this.handleTitle.bind(this);
this.handleAuthor = this.handleAuthor.bind(this);
this.handleGenre = this.handleGenre.bind(this);
this.handlePrice = this.handlePrice.bind(this);
this.handleFormSubmit = this.handleFormSubmit.bind(this);
this.handleClearForm = this.handleClearForm.bind(this);
}
handleTitle(e) {
let value = e.target.value;
this.setState(
(prevState) => ({
localBook: {
...prevState.localBook,
title: value,
},
}),
() => console.log(this.state.localBook)
);
}
handleAuthor(e) {
let value = e.target.value;
this.setState(
(prevState) => ({
localBook: {
...prevState.localBook,
author: value,
},
}),
() => console.log(this.state.localBook)
);
}
handleGenre(e) {
let value = e.target.value;
this.setState(
(prevState) => ({
localBook: {
...prevState.localBook,
genre: value,
},
}),
() => console.log(this.state.localBook)
);
}
handlePrice(e) {
let value = e.target.value;
this.setState(
(prevState) => ({
localBook: {
...prevState.localBook,
price: value,
},
}),
() => console.log(this.state.localBook)
);
}
handleFormSubmit(e) {
e.preventDefault();
this.props.actionCreators.requestBooks(this.state.localBook);
}
handleClearForm(e) {
e.preventDefault();
this.props.clearPosts();
this.setState({
localBook: {
title: "",
author: "",
genre: "",
price: "",
},
});
}
render() {
const { classes } = this.props;
return (
<Container maxWidth={false}>
<Grid item xs={12}>
<Grid container className={classes.root} justify="center" spacing={3}>
<Grid item lg={6} sm={6} xl={6} xs={12}>
<div style={marginStyle}>
<form
className="container-fluid"
onSubmit={this.handleFormSubmit}
>
<Input
inputtype={"text"}
title={"Title"}
name={"title"}
value={this.state.localBook.title}
placeholder={"Enter Title"}
handlechange={this.handleTitle}
/>{" "}
{/* Title */}
<Input
inputtype={"text"}
title={"Author"}
name={"author"}
value={this.state.localBook.author}
placeholder={"Enter Author"}
handlechange={this.handleAuthor}
/>{" "}
{/* Author */}
<Input
inputtype={"text"}
title={"Genre"}
name={"genre"}
value={this.state.localBook.genre}
placeholder={"Enter Genre"}
handlechange={this.handleGenre}
/>{" "}
{/* Genre */}
<Input
inputtype={"text"}
title={"Price"}
name={"price"}
value={this.state.localBook.price}
placeholder={"Enter Price"}
handlechange={this.handlePrice}
/>{" "}
{/* Price */}
<Button
action={this.handleFormSubmit}
type={"primary"}
title={"Submit"}
style={buttonStyle}
/>{" "}
{/*Submit */}
<Button
action={this.handleClearForm}
type={"secondary"}
title={"Clear"}
style={buttonStyle}
/>{" "}
{/* Clear the form */}
</form>
</div>
</Grid>
</Grid>
<Grid item xs={12}>
<Grid item lg={6} sm={6} xl={6} xs={12}></Grid>
<EnhancedTable />
</Grid>
</Grid>
</Container>
);
}
}
const buttonStyle = {
margin: "10px 10px 10px 10px",
};
// const mapDispatchToProps = dispatch => ({
// setUserRoleToUser: () => dispatch(clearPosts()),
// });
function mapDispatchToProps(dispatch) {
return {
actionCreators: bindActionCreators(actionCreators, dispatch),
clearPosts: () => dispatch(clearPosts()),
};
}
export default connect(
null,
mapDispatchToProps
)(withStyles(styles)(FormContainer));
Advertisement
Answer
First of all a Grid item should always be wrapped by a Grid container. So you should remove <Grid item xs={12}> after your container or wrapped it by another Grid with the container tag.
In addition to that, the grids which should share one row have to be next to each other. This means that you have to move your Grid with the EnhancedTable component. Your code would then look like this:
...
class FormContainer extends Component {
...
render() {
const { classes } = this.props;
return (
<Container maxWidth={false}>
<Grid container className={classes.root} justify="center" spacing={3}>
<Grid item lg={6} sm={6} xl={6} xs={12}>
<div style={marginStyle}>
<form
className="container-fluid"
onSubmit={this.handleFormSubmit}
>
<Input
inputtype={"text"}
title={"Title"}
name={"title"}
value={this.state.localBook.title}
placeholder={"Enter Title"}
handlechange={this.handleTitle}
/>{" "}
{/* Title */}
<Input
inputtype={"text"}
title={"Author"}
name={"author"}
value={this.state.localBook.author}
placeholder={"Enter Author"}
handlechange={this.handleAuthor}
/>{" "}
{/* Author */}
<Input
inputtype={"text"}
title={"Genre"}
name={"genre"}
value={this.state.localBook.genre}
placeholder={"Enter Genre"}
handlechange={this.handleGenre}
/>{" "}
{/* Genre */}
<Input
inputtype={"text"}
title={"Price"}
name={"price"}
value={this.state.localBook.price}
placeholder={"Enter Price"}
handlechange={this.handlePrice}
/>{" "}
{/* Price */}
<Button
action={this.handleFormSubmit}
type={"primary"}
title={"Submit"}
style={buttonStyle}
/>{" "}
{/*Submit */}
<Button
action={this.handleClearForm}
type={"secondary"}
title={"Clear"}
style={buttonStyle}
/>{" "}
{/* Clear the form */}
</form>
</div>
</Grid>
<Grid item lg={6} sm={6} xl={6} xs={12}>
<EnhancedTable />
</Grid>
</Grid>
</Container>
);
}
}
...