"Updating the state with a prop" or idk

Question

Currently i'm working in a ReactJS course but it's a little bit deprecated so, i'm trying it with the goal to practice ReactJS in a current version.

The guy made something like:

Setting a selectedItem prop

and then: updating the state

I'm trying to achieve this with "setState" somenthing but i receive an error saying that "selected genre" is not defined.

Here's my code:

  const handleGenreSelect = (genre) => {
    setAllGenres((prevState) => ({
      ...prevState,
      selectedGenre: genre,
    }));
  };

With that I expect to update the state and set a listGroup item active when the user makes click over it.

Answer 1

It looks like you're using a function component, which is great for practicing writing modern React code, but I think you might be getting mixed up between the format of the older class components used in course and the newer functional style.

Without seeing more of your code I can't be certain, but it looks like what you want to do something like this:

const [genres, setGenres] = useState([]);
const [selectedGenre, setSelectedGenre] = useState(null);

const handleGenreSelect = (genre) => {
    setSelectedGenre(genre);
}

Whereas in class components you would call this.setState() and pass it an object with multiple updated states at once, in a function component each state is updated separately.

The function you're calling, setAllGenres(), looks like it should be used to set your complete list of genres that the user can select from. In the example I shared above, I've tried to make it clear that you have two separate states - one for all of the genres, and one for the currently selected genre.