Dynamic page pagination is not working in react table

Question

I am using react-table v7 to generate a table. And now I am trying to make page size pagination dynamically by writing this

       <Select
              labelId="demo-simple-select-label"
              id="demo-simple-select"
              value={pageSize}
              onChange={(e) => {
                setPageSize(Number(e.target.value));
              }}
            >
              {page.length > 10 ? (
                <MenuItem id={10} value={10} key={10}>
                  Show 10
                </MenuItem>
              ) : (
                [10, 20].map((pageSize) => (
                  <MenuItem value={pageSize} key={pageSize}>
                    Show {pageSize}
                  </MenuItem>
                ))
              )}
        </Select>

If page (rows) length is over 10, it shows two options Show 10 and Show 20, but when I select Show 20, dropdown value doesn't show value anymore

And I get a warning in console Material-UI: You have provided an out-of-range value '20' for the select component. Consider providing a value that matches one of the available options or ''. The available values are '10'.

It works fine if I remove ternary operator in {page.length > 10 ? .. and just put [10,20,30].map() ..

Answer 1

If for the initial rendering, the value of page.length is over 10, the drop-down list will only display Show 10 because that's what your logic states. If that's really what you want and your problem is the non-displayed values, it works by changing MenuItem to option, with both select and option non-capitalized (in react-table 7.7.0):

<select
      labelId="demo-simple-select-label"
      id="demo-simple-select"
      value={pageSize}
      onChange={(e) => {
        setPageSize(Number(e.target.value));
      }}
    >
      {page.length > 10 ? (
        <option id={10} value={10} key={10}>
          Show 10
        </option>
      ) : (
        [10, 20].map((pageSize) => (
          <option value={pageSize} key={pageSize}>
            Show {pageSize}
          </option>
        ))
      )}
</select>

On the other hand, if what you want is to give the option of displaying only the Show 10 option when you have less than 10 rows, then change the > to < in the ternary operator check. That way you'll give (dynamically) the option of displaying only Show 10 if there are less than 10 rows, or both options, Show 10 and Show 20, when there are 10 rows or more.