Adding new options to form on click in ReactJs

Question

I am doing a React search where user can add multiple filters. The idea is that at first there is only one filter (select and input field) and if user wishes to add more, he can add one more row of (select and input) and it will also take that into account.

I cannot figure out the part on how to add more rows of (select, input) and furthermore, how to read their data as the list size and everything can change.

So I have multiple options in the select array:

const options = [
  { label: "foo", value: 1 },
  { label: "bar", value: 2 },
  { label: "bin", value: 3 }
];

Now if user selects the first value from the Select box and then types a text in the input box I will get their values and I could do a search based on that.

const options = [
  { label: "foo", value: 1 },
  { label: "bar", value: 2 },
  { label: "bin", value: 3 }
];

class App extends React.Component {
  state = {
    selectedOption: null,
    textValue: null
  };
  handleOptionChange = selectedOption => {
    this.setState({ selectedOption: selectedOption.value });
  };
  handleTextChange = event => {
    this.setState({ textValue: event.target.value });
  };
  handleSubmit = () => {
    console.log(
      "SelectedOption: " +
        this.state.selectedOption +
        ", textValue: " +
        this.state.textValue
    );
  };
  addNewRow = () => {
    console.log("adding new row of filters");
  };
  render() {
    const { selectedOption } = this.state;

    return (
      <div>
        <div style={{ display: "flex" }}>
          <Select
            value={selectedOption}
            onChange={this.handleOptionChange}
            options={options}
          />
          <input
            type="text"
            value={this.state.textValue}
            onChange={this.handleTextChange}
          />
        </div>
        <button onClick={this.addNewRow}>AddNewRow</button>
        <button onClick={this.handleSubmit}>Submit</button>
      </div>
    );
  }
}

export default App;

I have also created a CodeSandBox for this.

If user clicks on the addNewRow a new row should appear and the previous (search, input) should be selectable without the row that was previously selected.

I don't even really know how I should approach this.

Answer 1

To add new row of inputs on click of button you need to add new input item into the list of inputs, like I have mention below::

import React, { Component } from 'react'
import Select from "react-select";

const options = [
    { label: "foo", value: 1 },
    { label: "bar", value: 2 },
    { label: "bin", value: 3 }
];

class App extends Component {
    constructor(props) {
        super(props);
        this.state = { inputGroups: ['input-0'] };
    }
    handleSubmit = () => {
        console.log("form submitted");
    };

    AddNewRow() {
        var newInput = `input-${this.state.inputGroups.length}`;
        this.setState(prevState => ({ inputGroups: prevState.inputGroups.concat([newInput]) }));
    }

    render() {
        return (
            <div>
                <div>
                    <div>
                        {this.state.inputGroups.map(input =>
                            <div key={input} style={{ display: "flex" }}>
                                <Select
                                    options={options}
                                />
                                <input
                                    type="text"
                                // value={this.state.textValue}
                                // onChange={this.handleTextChange}
                                />
                            </div>
                        )}
                    </div>
                </div>
                <button onClick={() => this.AddNewRow()}>AddNewRow</button>
                <button onClick={this.handleSubmit()}>Submit</button>
            </div>
        );
    }
}

export default App;

After click on "AddNewRow" button it will add new input group for you. Now you need to wrap this inputGroup inside "Form" to get data of each inputGroup on click of submit.

I hope it will resolve your issue.