Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – React: Calling function in Parent Component from Child Component

I have 2 js files as below

mainpage.js

import * as React from 'react';
import Filter from '../components/filterPane.js';

export default function MainPage() {
    const handleSubmit = () => {
        alert('inside submit');
    }

    return (
        <div>
            <Header />
            <br/>
            <div className='rowC'>
                <Filter handleSubmit={handleSubmit}/>
            </div>
        </div>
      );
}

and filterPane.js

import * as React from 'react';
import Button from '@mui/material/Button';

export default function ComplexGrid( {handleSubmit}) {

  const submitFilter = () => {
    handleSubmit(); // Call the parent function
  };

  return (
       <Button variant="contained" onClick={()=>{submitFilter()}}>Submit</Button>
  );
}

I want to call the handleSubmit() function in mainPage.js from the onclick() event in filterPane.js.

When I trigger the click event it gives me an error in console as Uncaught TypeError: handleSubmit is not a function.

Any help is much appreciated

Thanks,

Tags:

2

Answers


  1. 0

    In mainpage.js you import Filter from ‘../components/filterPane.js’;

    In filterPane.js you export the React component as "ComplexGrid" instead of "Filter". Change the exported name to Filter.

    export default function Filter({handleSubmit}) {

    (in mainpage.js you also use a but this is missing an import)

    Login or Signup to reply.
  2. 0

    Here’s the corrected code, along with explanations for the changes:

    mainpage.js:

    import * as React from 'react';
import Filter from '../components/filterPane.js'; // Correct import path

export default function MainPage() {
  const handleSubmit = () => {
    alert('inside submit');
  };

  return (
    <div>
      <Header />
      <br />
      <div className='rowC'>
        <Filter handleSubmit={handleSubmit} /> // Pass handleSubmit as a prop
      </div>
    </div>
  );
}

    filterPane.js:

    import * as React from 'react';
import Button from '@mui/material/Button';

export default function Filter(props) { // Receive props correctly
  const submitFilter = () => {
    props.handleSubmit(); // Access handleSubmit from props
  };

  return (
    <Button variant="contained" onClick={submitFilter}>Submit</Button> // Pass submitFilter directly
  );
}

    Explanation of changes:

    • Import path: The import path in mainpage.js was incorrect. It’s
      corrected to ../components/filterPane.js to match the file structure.
    • Prop drilling: The handleSubmit function is passed as a prop from
      MainPage to Filter. This allows Filter to access and call the parent
      function.
    • Prop access: In filterPane.js, the props object is correctly used to
      access the handleSubmit function.
    • Event handling: The onClick handler in Filter directly calls
      submitFilter. There’s no need to wrap it in another anonymous
      function.
    • Function name: The component name in filterPane.js is changed from
      ComplexGrid to Filter to match the export name and usage in
      mainpage.js.
    • With these corrections, the code should compile and run without the
      "handleSubmit is not a function" error, allowing you to call
      handleSubmit from the onClick event in filterPane.js.
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search