Can not read property 0 of undefined in reactjs

Question

I have an application when user has the possibility to toggle between the components.The idea of the application is next:

1. User click on add field butt

Answer 1

Try to always define a default value, or take care to have exactly that data structure:

export const Edit = ({ mode, value, keyForm }) => {
  useEffect(() => {
    console.log("value inside edit", value);
  }, []);
  const back = () => {
    mode(true);
  };
  console.log("VALUE: ", value);
  // Default value definitions
  const { names = [] } = value || {};

  const { inner = {} } = names[0] || [];

  const { first = "" } = inner[keyForm]  || {};

  return (
    <div>
      edit mode
      <p>value: {first}</p>
      <button onClick={back}>back to default mode</button>
    </div>
  );
};

EDIT

For the toggle issue:

SubForm.js:

const DynamicFieldSet = props => {
  const [fieldsOnEdit, setFieldsOnEdit] = useState([]);


  const toggleSmall = i => {
    setFieldsOnEdit(prev => {
      if(prev.includes(i)) return prev.filter(ea => ea !== i);

      return [...prev, i];
    })
  }

  console.log("fieldsOnEdit", fieldsOnEdit);

  return (
    <Form.List name={[props.fieldKey, "inner"]}>
      {(fields, { add, remove }) => {
        return (
          <div>
            {fields.map((field, index) =>
              !fieldsOnEdit.includes(index) ? (
                <Space
                  key={field.key}
                  style={{ display: "flex", marginBottom: 8 }}
                  align="start"
                >
                  <Form.Item
                    {...field}
                    name={[field.name, "first"]}
                    fieldKey={[field.fieldKey, "first"]}
                    rules={[{ required: true, message: "Missing first name" }]}
                  >
                    <Input placeholder="First Name" />
                  </Form.Item>
                  <Form.Item>
                    <Button
                      type="primary"
                      htmlType="submit"
                      key="submit"
                      onClick={()=> toggleSmall(index)}
                    >
                      Submit inner
                    </Button>
                  </Form.Item>
                </Space>
              ) : (
                <Edit
                  value={props.values}
                  mode={toggleSmall}
                  keyForm={index}
                />
              )
            )}

            <Form.Item>
              <Button
                type="dashed"
                onClick={() => {
                  add();
                }}
                block
              >
                <PlusOutlined /> Add field to inner
              </Button>
            </Form.Item>
          </div>
        );
      }}
    </Form.List>
  );
};
export default DynamicFieldSet;

Edit.js:

export const Edit = ({ mode, value, keyForm }) => {

  useEffect(() => {
    console.log("value inside edit", value);
  }, []);

  const { names = [] } = value || {};

  const { inner = {} } = names[0] || [];

  const { first = "" } = inner[keyForm]  || {};

  return (
    <div>
      edit mode
      <p>value: {first}</p>
      <button onClick={()=> mode(keyForm)}>back to default mode</button>
    </div>
  );
};

Answer 2

Edit: I think setting state interferes with formVal updating.

setTimeout(() => {
      setFieldsOnEdit(prevIndexes => [...prevIndexes, index]);
      setDefaultMode(false);
    }, 0);

Placing it in a setTimeout resolves it.