Expected an assignment or function call and instead saw an expression

[balicaionut]

Hello,

Thank you for the great class!

I get the following Failed to compile error: ./src/components/PlaceDetails/PlaceDetails.js Line 10:19: Expected an assignment or function call and instead saw an expression no-unused-expressions

it is for this line of cod: if (selected) refProp?.current?.scrollIntoView({ behavior: 'smooth', block: 'start' });

I tried everything. I looked several times over the video, replaced '' with "" removed the ; tried a lot of different combinations. Nothing works. I used the exact code from git, and still the same error. On stack overflow and other sites, they say that it has something to do with the Return and some () or {} , but I am unable to figure out exactly what. And it is more frustrating as for you it worked. I had multiple issues along with the video where I was missing ; although you had them missing in the video for you the code worked but for me, it didn't until I put them at the end of various bits of code. What is the setup that you use for your VS Code?

Thank you for the help!

[ToddHCarpenter]

Here are the 2 things i added to get this to work.

In List.jsx under grid where you are passing refProp={elRefs[i], add ref={elRefs[i]} to Grid component.

      <Grid container spacing={3} className={classes.list}>
        {places?.map((place, i) => (
          <Grid ref={elRefs[i]} item key={i} xs={12}>
            <PlaceDetails
              selected={Number(childClicked) === i}
              refProp={elRefs[i]}
              place={place}
            />
          </Grid>
        ))}

Second, make sure in PlaceDetails.jsx under const PlaceDetails, make sure you are adding the ? in refProp?.current?.scrollIntoView({ behavior: "smooth", block: "start" });

const PlaceDetails = ({ place, selected, refProp }) => { if (selected) refProp?.current?.scrollIntoView({ behavior: "smooth", block: "start" }); const classes = useStyles();

If this didn't help, please post your code.

[balicaionut]

It did not work :( Here is the PlaceDetails code:

import React from 'react'; import { Box, Typography, Button, Card, CardMedia, CardContent, CardActions, Chip } from '@material-ui/core'; import LocationOnIcon from '@material-ui/icons/LocationOn'; import PhoneIcon from '@material-ui/icons/Phone'; import Rating from '@material-ui/lab/Rating';

import useStyles from './styles.js';

const PlaceDetails = ({ place, selected, refProp }) => { if (selected) refProp?.current?.scrollIntoView({ behavior: 'smooth', block: 'start' }); const classes = useStyles();

return (
    <Card elevation={6}>
        <CardMedia
            style={{ height: 350 }}
            image={place.photo ? place.photo.images.large.url : 'https://www.foodserviceandhospitality.com/wp-content/uploads/2016/09/Restaurant-Placeholder-001.jpg'}
            title={place.name}
        />
        <CardContent>
            <Typography gutterBottom variant="h5">{place.name}</Typography>
            <Box display="flex" justifyContent="space-between" my={2}>
                <Rating name="read-only" value={Number(place.rating)} readOnly />
                <Typography component="legend">{place.num_reviews} review{place.num_reviews > 1 && 's'}</Typography>
            </Box>
            <Box display="flex" justifyContent="space-between">
                <Typography component="legend">Price</Typography>
                <Typography gutterBottom variant="subtitle1">
                    {place.price_level}
                </Typography>
            </Box>
            <Box display="flex" justifyContent="space-between">
                <Typography component="legend">Ranking</Typography>
                <Typography gutterBottom variant="subtitle1">
                    {place.ranking}
                </Typography>
            </Box>
            {place?.awards?.map((award) => (
                <Box display="flex" justifyContent="space-between" my={1} alignItems="center">
                    <img src={award.images.small} />
                    <Typography variant="subtitle2" color="textSecondary">{award.display_name}</Typography>
                </Box>
            ))}
            {place?.cuisine?.map(({ name }) => (
                <Chip key={name} size="small" label={name} className={classes.chip} />
            ))}
            {place.address && (
                <Typography gutterBottom variant="body2" color="textSecondary" className={classes.subtitle}>
                    <LocationOnIcon />{place.address}
                </Typography>
            )}
            {place.phone && (
                <Typography variant="body2" color="textSecondary" className={classes.spacing}>
                    <PhoneIcon /> {place.phone}
                </Typography>
            )}
        </CardContent>
        <CardActions>
            <Button size="small" color="primary" onClick={() => window.open(place.web_url, '_blank')}>
                Trip Advisor
            </Button>
            <Button size="small" color="primary" onClick={() => window.open(place.website, '_blank')}>
                Website
            </Button>
        </CardActions>
    </Card>
);

};

export default PlaceDetails;

And here is the List code:
import React, { useState, useEffect, createRef } from 'react';
import { CircularProgress, Grid, Typography, InputLabel, MenuItem, FormControl, Select } from '@material-ui/core';

import PlaceDetails from '../PlaceDetails/PlaceDetails';
import useStyles from './styles.js';

const List = ({ places, type, setType, rating, setRating, childClicked, isLoading }) => {
  const [elRefs, setElRefs] = useState([]);
  const classes = useStyles();

  useEffect(() => {
    const refs = Array(places?.length).fill().map((_, i) => elRefs[i] || createRef());

    setElRefs(refs);
  }, [places]);

  return (
    <div className={classes.container}>
      <Typography variant="h4">Food & Dining around you</Typography>
      {isLoading ? (
        <div className={classes.loading}>
          <CircularProgress size="5rem" />
        </div>
      ) : (
        <>
          <FormControl className={classes.formControl}>
            <InputLabel id="type">Type</InputLabel>
            <Select id="type" value={type} onChange={(e) => setType(e.target.value)}>
              <MenuItem value="restaurants">Restaurants</MenuItem>
              <MenuItem value="hotels">Hotels</MenuItem>
              <MenuItem value="attractions">Attractions</MenuItem>
            </Select>
          </FormControl>
          <FormControl className={classes.formControl}>
            <InputLabel id="rating">Rating</InputLabel>
            <Select id="rating" value={rating} onChange={(e) => setRating(e.target.value)}>
              <MenuItem value="">All</MenuItem>
              <MenuItem value="3">Above 3.0</MenuItem>
              <MenuItem value="4">Above 4.0</MenuItem>
              <MenuItem value="4.5">Above 4.5</MenuItem>
            </Select>
          </FormControl>
          <Grid container spacing={3} className={classes.list}>
            {places?.map((place, i) => (
              <Grid ref={elRefs[i]} item key={i} xs={12}>
                <PlaceDetails
                  place={place}
                  selected={Number(childClicked) === i}
                  refProp={elRefs[i]}
                />
              </Grid>
            ))}
          </Grid>
        </>
      )}
    </div>
  );
};

export default List;