0

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)

Improve this question
1
  • 1
    What have you tried so far? StackOverflow expects you to try to solve your own problem first, as your attempts help us to better understand what you want. Please edit the question to show what you've tried, preferably with a minimal reproducible example that shows the specific roadblock you're running into. For more information, please see How to Ask. Commented Sep 7 at 7:46

2 Answers 2

Reset to default
3

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Thank you for your advice for using redux, I will try to use it if it solves the problem after reading more about it, at the seconde side you suggested, I already use an array to save the new data and it works so nice.
1

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>
        )
      }
    })
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.