Odtnhj

I'm having really bizarre issue with my code. I am using React to map a Redux state onto Material-UI cards. When I was testing different styling on my cards the other day I was able to make different classes and update the card appearance however I liked. However today when I added new information to my database the new cards will not take all of the styling from the Material-UI database. Specifically it seems like the new cards are not effected by justifyContent.

This is a difficult issue for me to explain but basically I have a database of information being mapped onto multiple different cards. Some of the cards are accepting the Material-UI styling other cards are not.

I would like to post a jsfiddle but I would need to link it to my database and I'm not sure that can be done.

Here is the page which is mapping my redux state:

import React, Component from 'react';
import connect from 'react-redux';
import ProjectItem from '../ProjectItem/ProjectItem'
import withRouter from 'react-router-dom'
import Header from '../Header/Header'
import withStyles from '@material-ui/core';

const mapReduxStateToProps = (reduxState) => (reduxState);

const styles = theme => (
 bodyContent: 
 marginTop: 100,
 
)

class ProjectPage extends Component 

 //This calls the getProjects function on the page load
 componentDidMount() 
 this.getProjects();
 

 //This function dispatches an action to our index page
 getProjects = () => 
 console.log('running')
 this.props.dispatch( type: 'GET_PROJECT')
 

 render() 
 const classes = this.props
 return (
 <div>
 <Header />
 <div className= classes.bodyContent>
 this.props.reduxState.projects.map((project,index) => 
 return(

 <ProjectItem 
 key = index
 id = project.id
 name =project.name
 description = project.description
 thumbnail = project.thumbnail
 website = project.website
 github = project.github
 tag_id = project.tag_id
 />

 )
 )
 </div>
 </div>
 );
 


export default withRouter(connect(mapReduxStateToProps)(withStyles(styles)(ProjectPage)));

And here is the page with my styling.

import React, Component from 'react';
import connect from 'react-redux';
import './ProjectItem.css'
import Card from '@material-ui/core/Card';
import CardMedia from '@material-ui/core/CardMedia'
import CardContent from '@material-ui/core/CardContent'
import Typography from '@material-ui/core/Typography'
import withStyles from '@material-ui/core';

const mapReduxStateToProps = (reduxState) => (reduxState);

const styles = theme => (
 card: 
 display: 'flex',
 width: 550,
 alignSelf: 'center',
 height: 150,
 paddingTop: 5,
 paddingBottom:5,

 ,
 details: 
 display: 'flex',
 flexDirection: 'column'
 ,
 thumbnail: 
 height: 150,
 minWidth: 150
 ,
 contentBody: 
 justifyContent: 'space-between',
 textAlign: 'left',
 alignItems: 'center',
 display : 'inline-flex',
 ,
 toolbar: theme.mixins.toolbar
)
class ProjectItem extends Component 



 render() 
 const classes = this.props
 return (
 <div className='container'>
 <Card className=classes.card>
 <CardMedia
 className=classes.thumbnail
 image=this.props.thumbnail
 title="Project Image"
 />
 <div className=classes.details>
 <CardContent className=classes.contentBody>
 <Typography variant='h5'>
 this.props.name 
 </Typography>
 <Typography variant='h6'>
 <a href=this.props.github>GitHub</a> 
 </Typography>
 <Typography variant='h6'>
 <a href=this.props.website>Website</a>
 </Typography>
 <Typography variant='h6'>
 this.props.tag_id
 </Typography>
 </CardContent>
 <CardContent className=classes.content> 
 <Typography>
 this.props.description
 </Typography>
 </CardContent>
 </div>
 </Card>
 </div>
 );
 


export default connect(mapReduxStateToProps)(withStyles(styles)(ProjectItem));