here is my code.

The code:

    const [isRent, setIsRent] = useState(null);

      const residentialSituation = [
        { value: 'rent', label: 'I rent' },
        { value: 'owned', label: 'I owned' },
      ];

    <Form>
      <Form.List name="users">
        {(fields, { add }) => {
          return (
            <>
              <Button
                type="dashed"
                onClick={() => {
                  add();
                }}
                block
              >
                Add
              </Button>
              {fields.map((field, i) => (
                <Collapse key={i} accordion>
                  <Panel header={i}>
                    <Form.Item
                      name={[field.name, 'residentialSituation']}
                      fieldKey={[field.fieldKey, 'residentialSituation']}
                    >
                      <Select
                        autoComplete="new-password"
                        showSearch={true}
                        onChange={(value) => setIsRent(value)}
                      >
                        {residentialSituation.map((el) => (
                          <Select.Option value={el.value} key={el.value}>
                            {el.label}
                          </Select.Option>
                        ))}
                      </Select>
                    </Form.Item>

                    {isRent === 'rent' && (
                      <Form.Item
                        label="price"
                        name={[field.name, 'rent']}
                        fieldKey={[field.fieldKey, 'rent']}
                      >
                        <Input />
                      </Form.Item>
                    )}
                  </Panel>
                </Collapse>
              ))}
            </>
          );
        }}
      </Form.List>
    </Form>

When I am clicking on add button new collapse was successfully adding.

Now I have two options in my select component choose I rent or I owned. When I am choosing I rent I am setting that value in useState and checking if isRent === 'rent' then render second input.

The problem is when I am adding a second collapse the select component is also reading from the state.

How can I set the different states for the different collapses?

CodePudding user response：

I updated your code.

So you need to do following.

1. Your useState state should be an object.

    const [inputState, setInputState] = useState({});

2. In select you should pass 2 arguments, select value and id.

    <Select onChange={(value) => handleChange(value, i)}>
       ...
    </Select>

3. In handleChange function do following. For every id set appropriate value.

    const handleChange = (e, i) => {
        setinputState({
          ...inputState,
          [i]: e,
        });
      };

4. With following condition check and render your component

    {inputState[i] === 'rent' && (<Form.Item> ... </Form.Item>}