How to open a modal component through an onClick from another component - javascript

This question is related to this one. I am rewording to make it simple.
I have a main navigation component (MainNavigation.js) which is siblings with a Secondary Navigation Component(SecNavigation.js) under the Header component(Header.js).
What I want is when I click on a specific Link in the MainNavigation.js the whole SecNavigation.js to be displayed in a modal.
My problem here is that I don't quite grasp how should I go using useState, useContext or even if I need any of this.

Hope this will clear something for you
What you need is a parent that handles the state and then it will pass it down to its children. Because the parent is keeping track of the children and what they are doing.
So what I have done it this:
App.js is the parent and I handle the state here.
Then I just pass down the setIsModalShowing setState function to the MainNav that will call it when I press a button.
Then in the App.js I will show or hide the modal if the setIsModalShowing is true or false
inside of the modal I am showing SecNav and the modal also has the setIsModalShowing passed down so that you can click on the button to close is and that will set the state to false.
Does that makes sense to you ? or else I can try to explain it in another way
Code example

Related

click event in parent of component not working in angular

I have nested component like this pattern
<div (click)="saveInfo()">
<product-list-component>
<single-product>
<div (click)="navigateToDetailsProduct()"></div>
<single-product>
<product-list-component>
</div>
and I want when I click on single product both of click function (saveInfo() in parent and navigateToDetailsProduct() in child component) are executed.
but sometimes both of them are executed and some times just a click function in child component.
I glad to understand how can I trigger two function in parent and child component in angular.
You can trigger two functions in parent and child component angular at same time. when you will click on navigateToDetailsProduct() then this function along with saveInfo() will trigger. Please open below link and see.
Click on "Navigate To Details Product" you can see two alert will come 1st when navigateToDetailsProduct() will trigger and second when saveInfo() will trigger.
https://stackblitz.com/edit/angular-ivy-uvyacb?file=src/app/singleproduct.app.component.html
Let me know if you need anything more.

React - Conditional mounting/unmounting of a component

Context
Let's say I have page that displays a list of employees, along with many other buttons and components. and whenever I click on an employee, a side panel appears with a bunch of information about that employee. If I click on any other employee while an employee is selected, the side panel remains intact with only the information inside it being re-fetched and updated.
I can also, change the employee's information from that side panel by editing the different fields and clicking Update which bulk updates every updated fields.
Problem Statement
Whenever an employee's information is being edited, I can also click on another employee, which, of course, means that the edited data for the previous employee is lost.
Objective
What I need to do in this case is that, whenever an employee's information is being edited from the side panel (a flag is present to denote that), and if any other component/buttons apart from Update is clicked, then I need to show a modal which states that everything that is unsaved would be lost. If the user selects Ok, the component that was clicked should mount/rendered/perform whatever it does. Otherwise, the user should go back to the previous state.
I initially tried to achieve that by using componentWillUnmount of the sidepanel, but it didn't really work because that component will unmount anyway. What I am thinking is that, I need to put a onClick handler in every button/component now apart from that 'Update' which checks if any information is being edited, if yes it will render that component, if not it will render that modal, and the user decides what to do in that modal. I am very skeptic about this as well by placing checks everywhere for a minor thing.
Anyone with experience about related to this use case ? Any insights would be highly appreciated. :)
First Put isEdited state isEdited: false Then when you edit the post then set isEdited to true. When user clicks update then set isEdited back to false. When user clicks button other than update then check isEdited if isEdited is true then dispay modal with message and button when button of model is click set isEdited to false.
Hopefully this will help
There are a few ways I can think to do this.
Add a check at the start of the function for each buttons onClick. As you've mentioned already, this is tedious, especially if there are lots of buttons that should affect the state.
Create a function that wraps the onClick functions, to perform this check. Similar to 1, however a bit easier to repeat:
const myOnClick = newEmployeeNumber => {
myState.employeeToView = newEmployeeNumber;
}
const checkUserWantsToContinue = (onClickToRunWhenContinued) => {
if (myAppState.isEdited) {
promptUserToSaveFirst();
} else {
onClickToRunWhenContinued();
}
}
return (
<div onClick={checkUserWantsToContinue(myOnClick)} />
);
You mentioned that you are trying to put this into the componentWillUnmount function. That implies that something is making the component unmount. Can you add the check in there? So rather than checking with the user before the component unmounts, check with them before the action that makes the component unmount.

How to create custom modal in reactjs app?

I want to make custom confirmation modal whenever user wants to delete his own post. How to approach that to use as less as possible code? I was thinking about independent component with logic inside (user can send via props function on yes/no, etc) but the problem I can't figure out is how to mount this component when user click on a button? Do I need to use local state inside every component when I need to use modal? Something like:
showModal ? <Modal onYes={()=>{}} onNo={()=>{}} title='whatever you want' /> : ''
Can I achieve that in other way? I hope I explained well.
You can use HOC as well. Keep show/hide state inside HOC and then pass props/functions (with currying) from Parent component
Small example - https://codesandbox.io/s/withtoggle-hoc-8bd0r

Vue.js: Communicate with components that are down the DOM

I'm just trying out Vue.js and I'm struggling with the key concept of passing information up and down the DOM from one component to the other.
Consider this example in which a container-toggle button should toggle all components within the container, or say, set them all to "true" or "false".
<div id="app">
<p>
<strong>Welcome!</strong>
Click the "true/false" buttons to toggle them.
Click the "Toggle all" button to toggle them all!
</p>
<app-toggle-container>
<app-toggle></app-toggle>
<app-toggle></app-toggle>
</app-toggle-container>
<app-toggle-container>
<app-toggle></app-toggle>
<app-toggle></app-toggle>
<app-toggle></app-toggle>
</app-toggle-container>
</div>
In this code pen, I've defined app-toggle and app-toggle-container as components: https://codepen.io/fiedl/pen/mmqLMN?editors=1010
But I can't find a good way to pass the information down from the container to the separate toggles.
Also, in a second step, when trying the other way round, for example, to have the "Toggle all" button just show "true" if all toggles are true, or to show "false" when all toggles are false, I can't find a way to pass the information of the current state of the toggles up to the container.
This doesn't seem like an uncommon problem. What is the proper way to do this in Vue.js? Or am I thinking about this it in the wrong way?
Quickly, I've found $broadcast and $dispatch. But as they are dropped in Vue.js 2, I'm most probably thinking about it in the wrong way :)
I forked your pen http://codepen.io/nicooga/pen/wdPXvJ.
Turns out theres a $children property for Vue components that contains your children components [controllers]. You can iterate over them and do stuff with them.
this.$children.forEach(c => c.toggle());
See
https://v2.vuejs.org/v2/api/#vm-children
VueJs Calling method in Child components.

How to hide/show adf component automatically

Hi I want to hide an adf component automatically.I have a selectOneChoice that contain some number (from 1 to 12).
Example when I select 2, it show's two field automatically without clicking any button..
i used this function to hide a declared componenet but just when i click a button..
function enableField(actionEvent) {
var nameInputText = actionEvent.getSource().findComponent("soc1");
nameInputText.setProperty("visible", true);
actionEvent.cancel();
}
i set the componement "soc1" visible = true than through the javascript function i change it..
SO the probleme here is how to read the number from the selectonechoise and how to set the component visible directly without clicking any button.
Actually Rendered won't do what you want. You want to use Visible property instead. Rendered causes the actual markup for the component not to be rendered on the page, so a Partial Refresh will not cause it to appear. Rendered is reserved, usually, to hide items that are secure. We set rendered property to false on the item(s), but then refresh the parent containing component - usually a layout manager - then it works. So either refresh the layout manager that contains the item or use Visible. I demonstrated this exact use case last week in class and it works as described.
Basicaly, you don't need javascript solution or any programming to achieve this.
You should set attributes rendered(this way component won't be rendered at the page at all) and partialTriggers that points to selectOneChoice component for components you want to show or hide. Also you have to set autoSubmit="true" for your selectOneChoice component.
<af:selectOneChoice id="soc1" autoSubmit="true" .../>
<af:panelGroupLayout id="plg1" partialTriggers="soc1">
<af:outputText id="ot1" rendered="#{bindings.lov.inputValue le 1}" inputValue="text1"/>
</af:panelGroupLayout>
Note: its not working code, just a sample
It will work following way, on valueChange event at selectOneChoice component value is submitted and partialRefresh fires for components that have it in partialTriggers specified. And rendered attribute will either render or remove component depending on it's EL expression. Components that should be managed wrapped into another component to make sure PPR reach it when they ain't rendered.

Categories