i am using react functional ponents (infact learning hooks ), so i am facing one issue when calling a function with in another function

here is my code

my functional ponent

    const LiteraryPage = props => {
      if (Object.keys(mainData).length === 0 && mainData.constructor === Object) {
        setMainDataSection(validateData(mainData));
      }
      const validateData = async (data) => {
    let finalDataArray = [];
    if (data.cars !== undefined) {
      finalDataArray = finalDataArray.concat(data.cars);
    }
    if (data.mobiles !== undefined) {
      finalDataArray = finalDataArray.concat(data.mobiles);
    }
    if (data.scooters !== undefined) {
      finalDataArray = finalDataArray.concat(data.scooters);
    }
    return finalDataArray;
  };

 
    }

But am getting a error

Uncaught TypeError: validateData is not a function

Please correct me if am missing something or if am wrong at some place.

i am using react functional ponents (infact learning hooks ), so i am facing one issue when calling a function with in another function

here is my code

my functional ponent

    const LiteraryPage = props => {
      if (Object.keys(mainData).length === 0 && mainData.constructor === Object) {
        setMainDataSection(validateData(mainData));
      }
      const validateData = async (data) => {
    let finalDataArray = [];
    if (data.cars !== undefined) {
      finalDataArray = finalDataArray.concat(data.cars);
    }
    if (data.mobiles !== undefined) {
      finalDataArray = finalDataArray.concat(data.mobiles);
    }
    if (data.scooters !== undefined) {
      finalDataArray = finalDataArray.concat(data.scooters);
    }
    return finalDataArray;
  };

 
    }

But am getting a error

Uncaught TypeError: validateData is not a function

Please correct me if am missing something or if am wrong at some place.

• javascript
• reactjs
• react-functional-ponent

Share Improve this question Follow edited Jun 20, 2020 at 9:12 CommunityBot 111 silver badge asked Apr 7, 2020 at 6:56 midhun kmidhun k 57611 gold badge1414 silver badges3636 bronze badges 8

• 1 validateData, should be defined before you use it. Just change the order. – Julio Vásconez Commented Apr 7, 2020 at 7:00
• 2 Is it possibly plaining about the function being used before it was defined? – Drew Reese Commented Apr 7, 2020 at 7:00
• @JulioVásconez i changed the order, that time am getting some infinite loop error – midhun k Commented Apr 7, 2020 at 7:01
• @DrewReese ^^. please see above ment – midhun k Commented Apr 7, 2020 at 7:01
• 1 Maybe if you use an editor like vscode your code would format properly and tell you you can't use validateData before it's defined as Julio already mentioned. – HMR Commented Apr 7, 2020 at 7:44

 |  Show 3 more ments

1 Answer 1

Sorted by: Reset to default 4

You are possibly setting a state directly inside the functional ponent when you are calling validate data and setMainDataSection.

So Firstly you need to define validateData before using it and secondly, you need to execute your check in a useEffect

const LiteraryPage = props => {
  const validateData = async (data) => {
    let finalDataArray = [];
    if (data.cars !== undefined) {
      finalDataArray = finalDataArray.concat(data.cars);
    }
    if (data.mobiles !== undefined) {
      finalDataArray = finalDataArray.concat(data.mobiles);
    }
    if (data.scooters !== undefined) {
      finalDataArray = finalDataArray.concat(data.scooters);
    }
    return finalDataArray;
  };
  useEffect(() => {
    if (Object.keys(mainData).length === 0 && mainData.constructor === Object) {
      setMainDataSection(validateData(mainData));
    }
  }, []);

}