Set select option to default if re-render in ReactJS

1

Hi,

I have controlled select element but dropdown it is not set back to default if re-render occurs.

const [currentPage, setPage] = useState(1);
const [selectValue, setSelect] = useState('Movie');

const handlePageSelection = e => {
    e.preventDefault();
    setPage(e.target.value);
  };

const handleTypeSelection = e => {
    e.preventDefault();
    setSelect(e.target.value);
    setPage(1);
  };

<select id='type' onChange={handleTypeSelection}>
              <option value='movie'>Movie</option>
              <option value='series'>Series</option>
              <option value='episode'>Episode</option>
            </select>

<select
                id='page-number'
                style={style.paginationContainer}
                onChange={handlePageSelection}
              >
                {pageArray.map(number => {
                  console.log(currentPage);
                  return (
                    <option value={number} key={number}>
                      {number}
                    </option>
                  );
                })}
              </select>

When I change the type then the page re-renders and fetches the movies for that selection.
If I choose like page 2 from drop down and then change the type then the page re-renders and shows the movies that belongs to the first page. So basically the option is set to default but dropdown still shows 2.

Other case when it works

If I choose page 6 from Movie than change type to Series and Series has got less than 6 pages to show then the default option 1 is shown.

What am I missing? Why it does not show 1 in dropdown after each re-render?

Thank you

2

deleted, wrong example

3

I have got it work.
Now it works correctly. Whenever I make a new search or change type then it set to 1. I was concentrating on defaultValue. Now I know it makes the select element uncontrolled. Using value and passing the current value to it makes it controlled.

<select
                id='page-number'
                style={style.paginationContainer}
                onChange={handlePageSelection}
                value={currentPage} //this is added
              >
                {pageArray.map(number => (
                  <option value={number} key={number}>
                    {number}
                  </option>
                ))}
              </select>