score:0

Accepted answer
import React from 'react';

const intialList = {
        Basics:{
            job_title:'',
            job_type:null,
            ppo:true,
            emp_type:null,
            start_date_month:null,
            start_date_year:null,
            end_date_month:null,
            end_date_year:null
        },
        Details:{},
        Preferences:{},
        Colleges:{}
    }
const formReducer = (state,action) => {
    switch (action.type) {
    case 'UPDATE_BASICS':
      return {...state,Basics:{
        ...state.Basics,...action.data
      }};
    case 'UNDO_TODO':
      return state.map(todo => {
        if (todo.id === action.id) {
          return { ...todo, complete: false };
        } else {
          return todo;
        }
      });
    default:
      return state;
  }
}

const App = () => {
  const [form, dispatch] = React.useReducer(
    formReducer,
    intialList
  );

  const updateBasicsInfo = _ => {
    dispatch({
      type: "UPDATE_BASICS",
      //You can set your form object its just dummy data
      data: {
            job_title:'Test' + Math.random(),
            job_type:"test",
            ppo:true,
            emp_type:"test",
            start_date_month:"test",
            start_date_year:null,
            end_date_month:null,
            end_date_year:null
        },
    });
  };

  return <>
  <div>
    Current job tiltle:{form.Basics.job_title}
  </div>
  //just dummy functionality to use reducer
  <button onClick={updateBasicsInfo}>
    Update job detail
  </button>
  </>
}

export default App;

score:0

const updateSection = (section, value) => setFormData({
  ...formData,
  [section]: value
});

<Basics
  state={formData.Basics}
  setState={(value) => updateSection('Basics', value)}
/>

Related Query

More Query from same tag