Before we go into the practical, we should know what is state and what is props in React. In ReactJs, components translate your raw data into Rich HTML with the help of JSX, the props and state together build with that raw data to keep your UI consistent. Okay, let's identify what exactly it is:
-
Props and state are both plain JS objects.
-
They are triggered by a render update.
-
React manages the component state by calling setState (data, callback). This method will merge data into this state and rerenders the component to keep our UI up to date. For example, the state of the drop-down menu (visible or hidden).
-
React component props (properties) that don't change over time, for example, drop-down menu items. Sometimes components only take some data with this props method and render it, which makes your component stateless.
-
Using props and state together helps you make an interactive app.
Read and Write Form data to Firebase Realtime Database.
As we know, ReactJS components have their own props and state-like forms that support a
few props that are affected via user interaction:
<input> and <textarea>:
|
Components |
Supported Props |
|
<input> and <textarea> |
Value, defaultValue |
|
<input> type of checkbox or radio |
checked, defaultChecked |
|
<select> |
selected, defaultValue |
As we've seen, the state and prop will give you the control to alter the value of the component and handle the state for that component.
Okay, now let's add some advanced features in our Add Ticket form, which can help you get the value from user input, and with the help of Firebase, we will save those values in the database.