How do I set currentPage value in useState using functional components?

user_16599014 0
Viewed 89

I'm following a tutorial. He is using class components. But I'm trying to achieve same result by using functional components. I'm posting both his and mine code. In my handleGenreSelect method I'm trying to pass currentPage with value of 1. Like he has passed in his handleGenreSelect method setState. The purpose of passing value as one is to reset genre to page 1. But as I'm using functional components. I cant seem to understand how do I pass it. Currently I'm getting an error that Error: "currentPage" is read-only

Class Components(His Code)

class Movies extends Component {
  state = {
    movies: [],
    genres: [],
    currentPage: 1,
    pageSize: 4,
    sortColumn: { path: "title", order: "asc" }
  };
  componentDidMount() {
    const genres = [{ _id: "", name: "All Genres" }, ...getGenres()];
    this.setState({ movies: getMovies(), genres });
  }
  handleGenreSelect = genre => {
    this.setState({ selectedGenre: genre, currentPage: 1 });
  };

Functional Components(My Code)

function Movies() {
  const initialMovies = getMovies();
  const initialGenres = [ {name:"All Genres"} , ...getGenres()];
  const [movies, setMovies] = useState(initialMovies);
  const [genres, setGenres] = useState(initialGenres);
  const [pageSize, setPageSize] = useState(4);
  const [currentPage, setcurrentPage] = useState(1);
  const [currentGroup, setcurrentGroup] = useState();


  const handleGenreSelect = (genre) => {
      //Trying to pass current page with value of 1
      setcurrentGroup(genre, currentPage)
    };
reactjs
2 Answers

Just use two setState like this:

setcurrentGroup(genre);
setcurrentPage(1);
user_61083900

You need to pass one new state value

Also you can combine few states into one

const Movies = () => {
  const initialMovies = getMovies();
  const initialGenres = [ {name:"All Genres"} , ...getGenres()];

  const [state, setState] = useState({
    movies: initialMovies,
    genres: initialGenres,
    pageSize: 4,
    currentPage: 1,
    currentGroup: null
  });

  const handleGenreSelect = (currentGroup) => {
    setState({...state, currentGroup});

    // or like this
    setState(state => ({...state, currentGroup}));
  };

  const handleFewValuesChangeExample = (movies, genres, pageSize, currentPage, currentGroup) => {
    setState({...state, movies, genres, pageSize, currentPage, currentGroup});

    // or like this
    setState(state => ({...state, movies, genres, pageSize, currentPage, currentGroup}));
  };

  const handleFewValuesChangeLikeObjectExample = ({movies, genres, pageSize, currentPage, currentGroup}) => {
    setState({...state, movies, genres, pageSize, currentPage, currentGroup});

    // or like this
    setState(state => ({...state, movies, genres, pageSize, currentPage, currentGroup}));
  };

  /* TODO */
};

More about useState

user_165932750
Related