React:How to submit data to a modal?-CodePudding

I am creating a job list. In this job list, we have a button to open modal for enter the detail of a job. However, when I pass a default job object with default value to the modal, the modal cannot show the default job value.

Because some default attributes are came from remote API, so in the JobList component, I use the useEffect hook to retrieve data from remote API.

Would you tell me what's going on?

My code is resided here.

CodePudding user response：

I checked your code and there is a logical error.

You need to add break; after addJob case statement in JobList.js.

Because of that, defaultJobObj is reiniting as undefined object.

-- ADDITION --

You need to handle defaultJobObj prop update in JobForm component.

You can define a hook and reinit items in reducer.

let reducer = (state, action) => {
    let result = { ...state };
    switch (action.type) {
      case "reinit":
        result.job = defaultJobObj;
        break;
      default:
        break;
    }
    return result;
  };

  useEffect(() => {
    updateItems({
      "type":"reinit"           
    })
  }, [defaultJobObj])

CodePudding user response：

Maybe you can use state management like Redux/React Context to pass the values to your modal