0

When I select a value it always returns the previous value. Not returning which I selected. I want, when I select value it quickly reflects and store current value.

const [postsPerPage, setPostsPerPage] = useState(15);

const handleChange = async (event) => {
    let data = (document.getElementById("dropzonee")).value
   
    setPostsPerPage(data)
    console.log(postsPerPage)

}


           <span>Rows Per Page</span>
            <select id="dropzonee"
                name="changedValue"
                onChange={handleChange}
                value={postsPerPage}
             >
                <option value="5">5</option>
                <option value="10">10</option>
                <option value="15">15</option>
            </select>
Naveen Nizam
  • 193
  • 8

2 Answers2

1

Just use event.target.value

const [postsPerPage, setPostsPerPage] = useState(15);

const handleChange = async (event) => {
    setPostsPerPage(event.target.value)
    console.log(postsPerPage)
}

or if you don't use asyns/await, use like this

const [postsPerPage, setPostsPerPage] = useState(15);

           <span>Rows Per Page</span>
            <select id="dropzonee"
                name="changedValue"
                onChange={(e) => setPostsPerPage(e.target.value)}
                value={postsPerPage}
             >
                <option value="5">5</option>
                <option value="10">10</option>
                <option value="15">15</option>
            </select>
goodcoder
  • 26
  • 5
0

Instead of

let data = (document.getElementById("dropzonee")).value,

try

let data = event.target.value.

It will always show selected value. But even so, console.log(postsPerPage) will always log previous value, because setState function works asynchronously, and it that moment state didn't really updated. Just log event.target.value to ensure

tykhan
  • 81
  • 8