javascript - Error when passing a functional component to a class component as a component prop

Question

I create a functional component and a class component. In the render method I want to call my functional component as a component prop.

My code:

function projectList(props) {
    const { classes } = props
    return (
      <div>
        {projects.slice(0, 5).map(project => (
          <Card className={classes.card} key={project.id}>
            <CardHeader
              classes={{ title: classes.h6, subheader:             
              classes.subtitle1 }}
              title={project.projectName}
              subheader={project.h5}
            />
            <CardActionArea>
              <CardMedia
                component="img"
                alt={project.h5}
                className={classes.media}
                image={project.img}
              />
              <CardContent>
                <Typography paragraph>
                  {project.paragraph}
                </Typography>
              </CardContent>
            </CardActionArea>
            <CardActions className={props.classes.actions}>
              <Button
                className={props.classes.projectButton}
                component={Link}
                to={project.pathname}
                size="medium"
                color="secondary"
              >
                Project Details
              </Button>
            </CardActions>
          </Card>
        ))}
      </div>
    )
  }

  projectList.propTypes = {
      classes: PropTypes.any.isRequired, // eslint-disable-line
  }

  class Projects extends Component {
    static propTypes = {
      classes: PropTypes.any.isRequired, // eslint-disable-line
    }

    render() {
      const { classes } = this.props
      return (
        <Grid container className={classes.projectPage} 
          direction="row">
          <Grid item xs />
          <Grid item>
            <Grid container alignItems="center" direction="column">
              {/* Title */}
              <Grid item>
                <Typography className={classes.h5} variant="h5">Latest 
                Projects</Typography>
              </Grid>
              <Grid item xs={12} sm={6} component={projectList} />
              <Grid item className={classes.nextButton}>
                <Button
                  className={classes.contained}
                  size="medium"
                  variant="contained"
                  onClick={this.handleShowMore}
                >
                  See More
                </Button>
              </Grid>
            </Grid>
          </Grid>
          <Grid item xs />
        </Grid>
      )
    }
  }

  export default withStyles(styles)(Projects)

I have this error message appearing

index.js:1452 Warning: Failed prop type: The prop classes is marked as required in projectList, but its value is undefined.

Anyone could help me fix this ?

标签： javascriptreactjsclass

Answer 1

Not sure where that <Grid/> component comes from but you could pass an inline wrapper for projectLists and return it as a jsx element (you would need a capital first letter though):

<Grid item xs={12} sm={6} component={() => <ProjectList classes={classes} />} />

Don't forget to change the decleration to capital letter:

function ProjectList(props) {
...