Can I add dynamically new Html tag input in JSX by React

Question

I have a system in React, system based on adding multiple accounts. the system at the first time you open it has the blank inputs and form when you filling fields input and click on (+Add account) button, system automatically will add your data bellow as the same shape of form you filled and having to ability to edit again and click save,

The question how can I generate dynamically new Html tag input in JSX by React and save it if I return to the same page.

---

Blank form before adding account

---

after adding a new account, system adding the form below with its data with the ability of editing and save with new button differ from (+Add account)

Answer 1

Don't think of clicking the button as adding Html, but instead updating the state which in turn is reflected by the render function.

Hard to be too specific without knowing the structure of your code, but somewhere in your application's state you will need to store a list of contacts. For example this could be an array on your highest level component's state.

how can I generate dynamically new Html tag input in JSX

This part is easy, within you render function just look at the state's contact list and draw out contacts as appropriate.

and save it if I return to the same page

When you click the add button, you will need to trigger updating the state (pushing a new contract to the array). Presumably you might also want to trigger data saving to a database etc here?

You might want to consider using Redux for maintaining the application state through navigation, etc.

Answer 2

I agree with Phil that Redux may be a good idea to use depending on the scope of your project.

It sounds like what you will want to do is create another React component to serve as an added/editable account (I'll call it AddedAccount) that accepts the add account form data as props.

You could then import AddedAccount into your form component and create an empty array in the form component's state. You can then populate the array with however many AddedAccount components the user creates and render them using the map method.

Example:

import AddedAccount from './whereever';    
const AccountForm = React.createClass({
      getInitialState() {
        return {
          addedAccounts = [] 
        }
      },

      addAccount(formData) {
        this.setState({
          addedAccounts: ...this.state.addedAccounts,
            formData
        })
      },

      render() {
        let addedAccounts = this.state.addedAccounts.map((account) => 
          <AddedAccount accountInfo={account} />
        ) 
        return (
          <div>
            ... // Make the Add Account button pass form data to this.addAccount()
            {addedAccounts}
          </div>
        )
      }
    })