As a newcomer in the world of full stack development, I am delving into coding projects to enhance my understanding of frontend technologies like React JS and Material UI. My latest endeavor involves creating a page that displays posts from the backend in a row format using Material UI components.
This is what I have written in Marketplace.js file:
import { Grid } from '@material-ui/core'
import React, { Component } from 'react'
// other imports
class Marketplace extends Component {
// state and component lifecycle methods
render() {
return (
<Grid container>
<Grid item sm={4} xs={12}>
<Profile/>
</Grid>
<Grid item sm={8} xs={12}>
// code for rendering form elements inside a grid
</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)
However, despite following the guidelines mentioned on the Material UI website, the elements were displayed in a column structure instead of a row. How can I rectify this issue?