Ansopedia is an open-source learning platform that empowers you to explore diverse educational content. Access a vast repository of knowledge, including: posts, forums, quizzes, personalized experience, blog, leaderboard, school, college & university details, etc
3
stars
5
forks
source link
FE - Update Input Component with Legend State for State Management #16
This issue proposes updating the existing Input component to leverage Legend State for managing its state and props. This will improve efficiency and simplify state handling in the component.
Current Approach:
The Input component manages its state using traditional React props (value, onChange, etc.).
This approach can lead to boilerplate code and difficulty managing complex input states (e.g., validation errors, loading states).
Proposed Update:
Utilize Legend State to create observables for the following:
value: The current value of the input field.
isValid: Boolean flag indicating the validity of the input (optional).
errorMessage: Optional error message to display if isValid is false.
Update the component to use observables instead of props:
Access the value observable using useObservable hook from Legend State.
Bind the onChange event handler to update the value observable.
Conditionally render validation errors based on the isValid and errorMessage observables.
Benefits:
Improved state management with Legend State's reactivity.
Reduced boilerplate code by eliminating the need for multiple props.
Easier handling of complex input states (e.g., validation, loading).
Issue Description
This issue proposes updating the existing
Input
component to leverage Legend State for managing its state and props. This will improve efficiency and simplify state handling in the component.Current Approach:
Input
component manages its state using traditional React props (value
,onChange
, etc.).Proposed Update:
value
: The current value of the input field.isValid
: Boolean flag indicating the validity of the input (optional).errorMessage
: Optional error message to display ifisValid
is false.value
observable usinguseObservable
hook from Legend State.onChange
event handler to update thevalue
observable.isValid
anderrorMessage
observables.Benefits:
ref: https://github.com/LegendApp/legend-state