I have a form, and I wanted to call a hooks function usePostAddList() in the ponent AddList() inside the function onSubmit(). basically the usePostAddList() is to make a POST request.

Here's the code for the AddList():

AddList.jsx

export default function AddList() {
..
..
const onSubmit = (e) => {
    e.preventDefault()

    const data = [
      {
        komoditas,
        areaKota,
        areaProvinsi,
        price,
        tglParsed,
      },
    ]

    // I called it here and it show an error
    usePostAddList(data)
}
..
..
}

Reducer/index.js

export function usePostAddList(data) {
  const [state, dispatch] = React.useReducer(reducer, initState)

  React.useEffect(() => {
    dispatch({ type: ACTIONS.MAKE_REQUEST })
    store
      .append("Sheet2", data)
      .then((res) =>
        dispatch({
          type: ACTIONS.ADD_LIST,
          payload: res,
        })
      )
      .catch((e) => {
        return dispatch({
          type: ACTIONS.GET_ERRORS,
          payload: e,
        })
      })
  }, [])

  return state
}

I have read many solutions like I must write "use" for the name of the function, capitalize the function AddList, but still got this error:

React Hook "usePostAddList" is called in function "onSubmit" which is neither a React function ponent or a custom React Hook function

but if I called the usePostAddList() like this code below somehow it worked :

AddList.jsx

export default function AddList() {
   const { lists, loading, errors } = usePostAddList("test")

   return (
      ...
   )
}

but it didn't solve my problem

I have a form, and I wanted to call a hooks function usePostAddList() in the ponent AddList() inside the function onSubmit(). basically the usePostAddList() is to make a POST request.

Here's the code for the AddList():

AddList.jsx

export default function AddList() {
..
..
const onSubmit = (e) => {
    e.preventDefault()

    const data = [
      {
        komoditas,
        areaKota,
        areaProvinsi,
        price,
        tglParsed,
      },
    ]

    // I called it here and it show an error
    usePostAddList(data)
}
..
..
}

Reducer/index.js

export function usePostAddList(data) {
  const [state, dispatch] = React.useReducer(reducer, initState)

  React.useEffect(() => {
    dispatch({ type: ACTIONS.MAKE_REQUEST })
    store
      .append("Sheet2", data)
      .then((res) =>
        dispatch({
          type: ACTIONS.ADD_LIST,
          payload: res,
        })
      )
      .catch((e) => {
        return dispatch({
          type: ACTIONS.GET_ERRORS,
          payload: e,
        })
      })
  }, [])

  return state
}

I have read many solutions like I must write "use" for the name of the function, capitalize the function AddList, but still got this error:

React Hook "usePostAddList" is called in function "onSubmit" which is neither a React function ponent or a custom React Hook function

but if I called the usePostAddList() like this code below somehow it worked :

AddList.jsx

export default function AddList() {
   const { lists, loading, errors } = usePostAddList("test")

   return (
      ...
   )
}

but it didn't solve my problem

• javascript
• reactjs
• use-reducer

Share Improve this question Follow edited Jul 26, 2020 at 2:51 panji gemilang asked Jul 26, 2020 at 2:20 panji gemilangpanji gemilang 80922 gold badges1313 silver badges3131 bronze badges 9

• Where are your props? – fuzzybear Commented Jul 26, 2020 at 2:28
• what do you mean by that? – panji gemilang Commented Jul 26, 2020 at 2:31
• What is the error? One of the rules of hooks is they have to be called at the top level of the ponent, so I suspect that's why usePostAddList() doesn't error in your second example but it does when it's nested inside of onSubmit. – EvanMorrison Commented Jul 26, 2020 at 2:43
• so what should I do? I can't call useReducer inside a function? – panji gemilang Commented Jul 26, 2020 at 2:52
• Are you importing React in your AddList file? – ludwiguer Commented Jul 26, 2020 at 3:31

 |  Show 4 more ments

1 Answer 1

Sorted by: Reset to default 6

You can only use hooks inside functional ponents and at the top of your ponent. Check rules of hooks for more information on why.

You can use your custom hook as follows:

export default function AddList() {
 const [data,setData] = useState()
 const { lists, loading, errors } = usePostAddList(data)

 return (
  ...
 )
}

And update your data at onSubmit function:

const onSubmit = (e) => {
 e.preventDefault()

 const data = [
  {
    komoditas,
    areaKota,
    areaProvinsi,
    price,
    tglParsed,
   },
 ]

 // Call set data
 setData(data)
}