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 (
    

      edit mode
      
value: {first}
      back to default mode
    
  );
};

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 (
    
      {(fields, { add, remove }) => {
        return (
          

            {fields.map((field, index) =>
              !fieldsOnEdit.includes(index) ? (
                
                  
                    
                  
                  
                     toggleSmall(index)}
                    >
                      Submit inner
                    
                  
                
              ) : (
                
              )
            )}

            
               {
                  add();
                }}
                block
              >
                 Add field to inner
              
            
          
        );
      }}
    
  );
};
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 (
    

      edit mode
      
value: {first}
       mode(keyForm)}>back to default mode
    
  );
};