How to change the action of a button in child component from a parent component?

Asked
Active3 hr before
Viewed126 times

9 Answers

componentactionchangebutton
90%

By clicking “Accept all cookies”, you agree Stack Exchange can store cookies on your device and disclose information in accordance with our Cookie Policy. , If I have data that appears normally distributed, but it contains a lot of zeros, are there issues with assuming a normal distribution? ,Software Recommendations

Pretag
 Pretag team - issue, fix, solve, resolve
88%

In the parent component, let's first define what we want to happen when the user clicks the button and then confirms. In the first case, we'll find the user's account and delete it.,Next, in the child component we will implement the logic to confirm that the user wants to take the action they indicated by clicking the button:,In the component, determine when something has happened, and when to tell the outside world. Here, we want to trigger the outside action (deleting the account or sending the message) after the user clicks the button and then confirms.

Let's call our component button-with-confirmation. We can create it by typing:

ember generate component button - with - confirmation

We'll plan to use the component in a template something like this:

{
   {
      button - with - confirmation
      text = "Click OK to delete your account."
   }
}

We'll also want to use the component elsewhere, perhaps like this:

{
   {
      button - with - confirmation
      text = "Click OK to send your message."
   }
}
load more v
72%

Pretag
 Pretag team - issue, fix, solve, resolve
65%

Now let’s create the App component which will render this Superhero component and a button. When we click the button it shows the real superhero name.,First, we will create a Superhero component with a name attribute in state. This component will render that name first.,Let’s create a ref of the Superhero component in the App component. Here is the code for doing that.

Pretag
 Pretag team - issue, fix, solve, resolve
75%

Pretag
 Pretag team - issue, fix, solve, resolve
40%

To communicate between Child to Parent component we should first understand the Events.,When the user clicks a button, that clicks to is an event.,Create two LWC components modalParentComponent and modalChildComponent.

import {
   LightningElement
} from 'lwc';

export default class ModalParentComponent extends LightningElement {
   showModal = false
   showHandler() {
      this.showModal = true
   }
   modalCloseHandler() {
      this.showModal = false
   }
}
load more v
22%

Follow the same steps for the child component, except the child component needs to dispatch the INCREMENT_PARENT action.,To update the state you need to create a reducer, as shown below.,In the parent component, dispatch the INCREMENT_CHILD action so the reducer updates the counter in the child component. To make the dispatch method available as a prop, use the connect() method. Also, pass the mapStateToProps argument to the connect method so the parent's counter value is sent as the prop to the component.

1
const initialState = {
   2 parentCounter: 0,
   3 childCounter: 0,
   4
};
load more v
60%

here we have created a child function and inside that, we are creating a simple button whose text data and onclick event will be coming from the parent component. we have passed data and onChildClick props as an object argument to the child function.,here we have created a clickAlert function which basically running an alert function. Then we have passed the child component inside our render method. The data “Click here” and onChildClick event will be passed to our child component,here you can see that we have passed Click here as data and onChildClick event from parent to the child. Now when we click on the button it will run our clickAlert function which will basically alert “I am working”.

import React from "react";export default function Child({data, onChildClick}) {    return (      <div className="child">       <button onClick={onChildClick}>{data}</button>      </div>    );  }

2. Now we will import the child component to our parent component.

import Child from './Child'

3. Then inside your parent function create another function to run our desire event and pass the child component to return.

import React from "react";import "./styles.css";import Child from './Child'export default function Parent() {function clickAlert(){    alert("I am working")}  return (    <div className="App">     <Child data="Click here" onChildClick={clickAlert} />    </div>  );}
load more v
48%

React hooks are introduced in React 16.8. If you are familiar with the class components then there is no difference to change the parent component state from child component., Change Parent Component State from Child using hooks in React,As you see that we set the onChange property to the Child component. Next step is to create the Child component.

Child component holds the Input field and we are going to send the input field value to the Parent component. So let’s create the Parent component first.

function Parent() {
    const [value, setValue] = React.useState("");

    function handleChange(newValue) {
      setValue(newValue);
    }

    // We pass a callback to Child
    return <Child value={value} onChange={handleChange} />;
}
load more v

Other "component-action" queries related to "How to change the action of a button in child component from a parent component?"