The problem which we are solving here is to create a dynamic UI component as displayed in the diagram using React JS below with the following features:-
- Input Form# Will have a text input field and a add button. Whenever user adds a text the text is appended in the outputform.
- OutputForm# Will display all the text added by user and also when user clicks a text it will be deleted from output form.
- Install NodeJS
- Install create-react-app using the following command
npm install –g create-react-app
- Create and start react app. Create a folder inside which you want to initialize your app and run the following command.
- Now we need bootstarp to give look and feel to our application. You can now add bootstrap to project
npm install bootstrap –save
We are dividing the applications into three react components
App.js – Represents the parent component
This component of react maintains the state and events that will be trigered. This component will render both the input and output forms.
Components/CustomForms.js – Represents the Input Form. This component will update the state of App component when the text field is changed on the inputform or Add button is clicked. When input text is changed we will update the state to capture the text on input field. When Add button is pressed we will update the state to append the latest typed value on input field.
Components/ ListControl.js – Represents the outputForms. This component will render the names input by the user from the state on the UI and also will update the state to remove the selected name whenever name is clicked.