I'm trying to dynamically add select fields on click, each block contains 2 select fields and I want to change the options of the second field based on the first one.

I managed to do half of it but the second field is changing for all blocks and not only the intended one.

import React from "react";
import ReactDOM from "react-dom";
import { Pane, Button, Heading, SelectField } from "evergreen-ui";

function SelectFieldExample() {
  const [conditionIndex, setConditionIndex] = React.useState(0);
  const [selectValue, setSelectValue] = React.useState("");
  const [operatorValue, setOperatorValue] = React.useState("");

  const [numberOfConditions, setNumberOfConditions] = React.useState(1);

  const handleselect = (e) => {
    const { name } = e.target;
    const { value } = e.target;

    setSelectValue((selectValue) => ({
      ...selectValue,
      [name]: value
    }));
  };

  const handleoperator = (e) => {
    const { name } = e.target;
    const { value } = e.target;

    setOperatorValue((operatorValue) => ({
      ...operatorValue,
      [name]: value
    }));
  };

  const onAddCondition = (event) => {
    setConditionIndex(conditionIndex);
    setNumberOfConditions(numberOfConditions   1);
  };

  return (
    <Pane maxWidth={654}>
      <Pane width={900}>
        <form>
          <Pane display="flex" flexDirection="column" gap={25}>
            <Heading>Conditions</Heading>
            <Pane marginTop={-15}>
              {/* ------------------------------------------------------ */}
              {Array.from(Array(numberOfConditions)).map((x, index) => (
                <Pane
                  id={index}
                  key={conditionIndex}
                  marginTop={-10}
                  display="flex"
                  alignItems="center"
                  gap={10}
                >
                  <SelectField
                    minWidth={180}
                    value={selectValue[name]}
                    onChange={(e) => handleselect(e, conditionIndex)}
                    name={"conditions["   conditionIndex   "][field_id]"}
                  >
                    <optgroup label="Data">
                      <option value="tag">Tag</option>
                      <option value="events">Event</option>
                    </optgroup>
                  </SelectField>

                  <SelectField
                    minWidth={180}
                    value={
                      operatorValue[
                        "conditions["   conditionIndex   "][operator]"
                      ]
                    }
                    onChange={(e) => handleoperator(e, conditionIndex)}
                    name={"conditions["   conditionIndex   "][operator]"}
                  >
                    {selectValue[
                      "conditions["   conditionIndex   "][field_id]"
                    ] === "events" && <option value="Event">Event</option>}
                    {selectValue[
                      "conditions["   conditionIndex   "][field_id]"
                    ] === "tag" && <option value="Tag">Tag</option>}
                  </SelectField>
                </Pane>
              ))}
              {/* ----------------------------------------------------*/}
            </Pane>
          </Pane>
        </form>

        <Button
          width={110}
          onClick={onAddCondition}
          marginRight={12}
          size="medium"
        >
          Add condition
        </Button>
      </Pane>
    </Pane>
  );
}

ReactDOM.render(<SelectFieldExample />, document.getElementById("root"));

You can see it in Codesandbox

I hope someone can help me out with this. Thank you

CodePudding user response：

There is no need to maintain currentIndex in state, For the usecase mentioned. I have used loop index for generating dynamic name for select fields.

Here you can check on Codesandbox https://codesandbox.io/s/romantic-chatterjee-6odhyn?file=/index.js