Child Component in Parent Component is calling different function on click React

ASIF KAIF

When I am clicking on button 2 first it is calling function 1 not function 2, I want if click button1 should call function 1 and if click on button2 should call function 2

it is working fine if click button 1 first then button 2 next, but it is calling function 2 if I click button 2 first

const function1 =()=>
{
   alert('function 1 called')
}

const function2 =()=>
{
   alert('function 2 called')
}

parent Component

const ParentComponent = () =>
{
  return(
       <ChildComponent onChange={function1} />
       //Button 1

       <ChildComponent onChange={function2} />
      //Button 2
  )
}

child Component

const ChildComponent = (props) =>
{
    return(
        <>
            <div className='button'>
                <label htmlFor='single'>
                    <FontAwesomeIcon icon={faImage} color='#3B5998' size='5x' />
                </label>
                <input type='file' id='single' onChange={props.onChange} />
            </div>
        </> 

    )
}
Nectos

id='single' this part should be unique per DOM element.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

Calling Parent Function in Child Component in React

From Dev

React: problem calling child function in parent component

From Dev

Child component is not calling parent component function

From Dev

react calling a function in a child component

From Dev

Vue calling parent component function when child component function completes

From Dev

React: trigger event in child component by click on parent

From Dev

react: Calling child component's method from parent component

From Dev

Pass data via on click from child component to parent component react

From Dev

React child Component in parent Component

From Dev

Calling a method on Parent Component from Child Component

From Dev

Unable to call parent component function from child component in React

From Dev

Trigger a function from child component and define in parent component in React Native

From Dev

How to have a React child component call a function from a parent component

From Dev

React - parent class component function change class of child component

From Dev

React child component not executing functional parent component function

From Dev

How to call React/Typescript child component function from parent component?

From Dev

Pass callback function from parent component to child component react

From Dev

react-Native: Access child component function inside parent component

From Dev

event.preventDefault on child component which is calling parent function - React Js

From Dev

Load a child component on click of parent component?

From Dev

Get parent component properties on click of child component

From Dev

react child component fails to render when calling parent callback with setstate

From Dev

Calling a method of a parent component from child - React Native

From Dev

React with Redux: Passing function to child component, calling without handler in child

From Dev

Call a function in imported child component on click from a parent element?

From Dev

React JS : Calling Child component method within parent component (React with typescript)

From Dev

React Parent Component Not Rendering Child Component

From Dev

React: Child Component Filtering Parent Component Props

From Dev

react component - parent child interaction; component Lifecycle

Related Related

  1. 1

    Calling Parent Function in Child Component in React

  2. 2

    React: problem calling child function in parent component

  3. 3

    Child component is not calling parent component function

  4. 4

    react calling a function in a child component

  5. 5

    Vue calling parent component function when child component function completes

  6. 6

    React: trigger event in child component by click on parent

  7. 7

    react: Calling child component's method from parent component

  8. 8

    Pass data via on click from child component to parent component react

  9. 9

    React child Component in parent Component

  10. 10

    Calling a method on Parent Component from Child Component

  11. 11

    Unable to call parent component function from child component in React

  12. 12

    Trigger a function from child component and define in parent component in React Native

  13. 13

    How to have a React child component call a function from a parent component

  14. 14

    React - parent class component function change class of child component

  15. 15

    React child component not executing functional parent component function

  16. 16

    How to call React/Typescript child component function from parent component?

  17. 17

    Pass callback function from parent component to child component react

  18. 18

    react-Native: Access child component function inside parent component

  19. 19

    event.preventDefault on child component which is calling parent function - React Js

  20. 20

    Load a child component on click of parent component?

  21. 21

    Get parent component properties on click of child component

  22. 22

    react child component fails to render when calling parent callback with setstate

  23. 23

    Calling a method of a parent component from child - React Native

  24. 24

    React with Redux: Passing function to child component, calling without handler in child

  25. 25

    Call a function in imported child component on click from a parent element?

  26. 26

    React JS : Calling Child component method within parent component (React with typescript)

  27. 27

    React Parent Component Not Rendering Child Component

  28. 28

    React: Child Component Filtering Parent Component Props

  29. 29

    react component - parent child interaction; component Lifecycle

HotTag

Archive