How can I change nested state in class component to state in functional component?

Question

I have some nested state in class component that I want change it to functional component, but I don't know how can I use nested state in functional component with hook and useState and also useEffect? can you help me please?

state = {
  products: null,
  totalPrice: 0,
  addCounter: 0,
  purchased: false,
  loading: false,
  form: {
    name: {
      elementType: 'input',
      elmentConfig: {
        type: 'text',
        palceholder: 'Name...',
      },
      value: '',
      validation: {
        required: true,
      },
      valid: false,
      used: false,
    },
    password: {
      elementType: 'input',
      elmentConfig: {
        type: 'password',
        palceholder: 'Password...',
      },
      value: '',
      validation: {
        required: true,
      },
      valid: false,
      used: false,
    },
    email: {
      elementType: 'input',
      elmentConfig: {
        type: 'text',
        palceholder: 'Email...',
      },
      value: '',
      validation: {
        required: true,
      },
      valid: false,
      used: false,
    },
  },
};

Do you know which state is you are changing for `eg. state.form.elementConfig.placeholder`? — Aamin Khan, Nov 18 '20 at 12:22
@AaminKhan: in fact this state is on a class component and now I wana use this state for functional component, I want know how can I change state of class component to functional component? — Parisa, Nov 18 '20 at 12:53

score 1 · Answer 1 · answered Nov 18 '20 at 14:40

Convert your state with useState, however I would recommend separating your state in smaller 'states' to make it a little more manageable and not have deeply nested values.

eg.

const [checkout, setCheckout] = useState({
    products: null,
    totalPrice: 0,
    addCounter: 0,
    purchased: false,
    loading: false
});

const [userForm, setUserForm] = useState({
    name: {
        elementType: 'input',
        elementConfig: {
           type: 'text',
           placeholder: 'Name...'
        },
        value: '',
        validation: {
            required: true
        },
        valid: false,
        used: false,
    },
    password: {
        elementType: 'input',
        elementConfig: {
            type: 'password',
            placeholder: 'Password...'
        },
        value: '',
        validation: {
            required: true
        },
        valid: false,
        used: false,
    },
    email: {
        elementType: 'input',
        elementConfig: {
            type: 'text',
            palceholder: 'Email...'
        },
        value: '',
        validation: {
            required: true
        },
        valid: false,
        used: false,
    }
});

nb. you can get your state from the useState hook simply by calling the state name once it has been initialised.

setting your state can become complex when working with deeply nested states so the 'shallower' the better for each state imho.

see documentation here: https://reactjs.org/docs/hooks-state.html with equivalent class examples

thank you, then how can i use them for changing state? for eg. I want change state of required? how can I do that then? — Parisa, Nov 19 '20 at 06:06
I'd refer you to this stack response: https://stackoverflow.com/questions/57798841/react-setting-state-for-deeply-nested-objects-w-hooks articulated much better than i could :) — Iamspencr, Nov 23 '20 at 14:27

score 0 · Answer 2 · answered Nov 18 '20 at 12:59

You can try:

const [formElements, setFormElements] = useState({
  products: null,
  totalPrice: 0,
  addCounter: 0,
  purchased: false,
  loading: false,
  form: {
    name: {
      elementType: 'input',
      elmentConfig: {
        type: 'text',
        palceholder: 'Name...',
      },
      value: '',
      validation: {
        required: true,
      },
      valid: false,
      used: false,
    },
    password: {
      elementType: 'input',
      elmentConfig: {
        type: 'password',
        palceholder: 'Password...',
      },
      value: '',
      validation: {
        required: true,
      },
      valid: false,
      used: false,
    },
    email: {
      elementType: 'input',
      elmentConfig: {
        type: 'text',
        palceholder: 'Email...',
      },
      value: '',
      validation: {
        required: true,
      },
      valid: false,
      used: false,
    },
  },
});

By using this, the initial state can be available in formElements and to update it you can use setFormElements function.

Reference

How can I change nested state in class component to state in functional component?

2 Answers2