I have a simple antd select which has three options ( "Jack", "Lucy" and "Laura"). Lucy is default value. I have h2 that displays value of select when I change any value. When I click "Jack", it displays: "Field value is Jack" and same happens for other two values as well. I am using onChange event to catch the value and then store it in a state and then display it. Problem is I want to display "Field value is lucy" when page loads and I am not able to achieve this. When I change value to other than lucy and again come back to lucy then onChange event captures the value of lucy in state and it gets displayed, but I want to display its value from start, when page loads without changing value other than lucy. How can I extract default value of this antd select?
Here is code: https://stackblitz.com/edit/react-ey3kfq?file=src%2FApp.js,src%2Fstyle.css
Help would be greatly appreciated.
Creds for providing a working sample showing the issue. Here's a fixed solution: https://stackblitz.com/edit/react-fekvet?file=src/App.js
The issue is because your Select control had a defaultValue which didn't align with what was being displayed. The easy fix is to provide useState with your intended initial value, and use that as the value for defaultValue