React: add dynamically fields

Question

I have a class in which I should add dynamically fields when the user click on "Add Button" or delete the fields if the user click on the "Remove Button".

export default class myClass extends Component
{
  constructor(props){
    super(props);
  }
Fields = [
    {
      name: '$ClassName',
      fields: [
        {
          name: 'ClassName.FirstField',
          col: ["lg-6", 'md-6', 'sm-12'],
          required: true,
          label: "First Field"
        }
        ]
    },
  ]

render()
  {
    const self = this
    return(
      <Column col={'12'} className="mt-2 mb-2">
        <Row>

          {
            this.Fields.map((group, i) => (

              <Column key={`${group.name}_i`} col="12" className="mt-4 mb-2 form-fields-wrap">

                <h5 className="form-section-title">{group.label}</h5>
                <Row>
                  
                  {
                    Start.renderFieldsGroup(group.fields, group.name, this.props.preview)
                  }
                </Row>
              </Column>

            ))
          }
        </Row>
      </Column>
    )
  }

Now I should create the possibility to add (and remove) the Fields array when an user click on Add Button (or Remove Button).

How can I do to add dynamically add this field?

EDIT:

export default class myClass extends Component
{
  constructor(props){
    super(props);
 this.state = { inputs: ['input-0'] };
  }

tryFunction(){
    
    const self = this
    return(
      <Column col={'12'} className="mt-2 mb-2">
        <Row>

          {
            this.Fields.map((group, i) => (

              <Column key={`${group.name}_i`} col="12" className="mt-4 mb-2 form-fields-wrap">
                <h5 className="form-section-title">{group.label}</h5>
                <Row>
                  
                  {
                    Start.renderFieldsGroup(group.fields, group.name, this.props.preview)
                  }
                </Row>
              </Column>

            ))
          }
        </Row>
      </Column>
    )
  }

  appendInput() {
    console.log("11111")
    var newInput = `input-${this.state.inputs.length}`;
    this.setState(prevState => ({ inputs: prevState.inputs.concat([newInput]) }));
}

 render()
  {
    const self = this
    return(
      <div>

          <div id="dynamicInput">
            {console.log("this.state.input ", this.state.input)}
              {this.state.inputs.map(input => this.tryFunction())}
          </div>

      <button onClick={ () => this.appendInput() }>
          CLICK ME TO ADD AN INPUT
      </button>
   </div>
);
  }

You should use state for that and an handler that calls setState to dynamically add data to your array. Then you can pass this handler as an event handler for any thing that triggers this addition of data. Hope this helps — Rafael Rocha
– Rafael Rocha, Commented Apr 16, 2021 at 10:37
Thank you for your answer, I have tried in this way (EDIT message) but it doesn't work — Jack23
– Jack23, Commented Apr 16, 2021 at 10:51
the answer below should be what you're looking for. Good luck! — Rafael Rocha
– Rafael Rocha, Commented Apr 16, 2021 at 12:51

iNex · Accepted Answer · 2021-04-16 12:34:36Z

You call this.Fields.map() in your edit but as far as i can tell you dont actually declare Fields. I made an example how i would solve such a situation, you should be able to use the same technique for your situation.

export default class MyClass extends React.Component{
    constructor(props){
        super(props);

        this.state = {
            dynamicItems: []
        };
    }

    handleClick(){
        //Add a new item component to state.dynamicItems
        this.setState(prevState => ({
            dynamicItems: [...prevState.dynamicItems, <Item text="text" key="key" />]
        }));
    }
    
    render(){
        return(
            <div className="page">
                <div className="dynamic-container">
                    {/*Render item components*/}
                    {this.state.dynamicItems.map((item) => {return item})}
                </div>

                <button onclick={() => this.handleClick()}>Add Item</button>
            </div>
        );
    }
}

//Item component
class Item extends React.Component{
    render(){
        return(
            <div className="item" key={this.props.key}>
                <p>{this.props.text}</p>
            </div>
        );
    }
}

Collectives™ on Stack Overflow

React: add dynamically fields

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related