We Keep Coding

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

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

using a v-dialog in a v-for loop overwrites click event for all but last v-dialog when using vuetify

I have an app that is using a Vuetify v-dialog in a v-for loop. However, although the separate activator components render correctly within each v-dialog, when I click on one of the chips it emits the click event for the last v-chip regardless of what chip i click on..
It is as though all the v-dialogs are using the same click event to submit the data from the last v-chip.
Why is the corresponding click event for each v-dialog not being invoked when a chip is clicked?
Demo:
https://codepen.io/deftonez4me/pen/ExyQRxB

Just use an object instead of an array and replace removeTagDialogs[removeTagDialogs.indexOf(tag.id)] with removeTagDialogs[tag.id], in both places.
See it working: https://codepen.io/andrei-gheorghiu/pen/WNxMyMa

How to rerender parent component buttons React.js

I have deeply nested JSON file with names of buttons as four level buttons.
Every button in first level need to have a onClick function which toggles nested component with second Level buttons and the flow for all levels is described below:
I tried to create all button levels in single component.
I also tried to Nest component for every level.
I tried to pass onClick function as a prop to child component and make a callback to change the parent.
Main Issue at point number 3:
This is working but only in console log, I cannot render new values (but I have new values in console.log)
What correction do I need to perform?

VUE component mutual interference

I have a vue component named "MText",
I insert the component twice,like this:
<MText></MText>
<MText></MText>
"MText" bind a click event to remove itself through "this.$el.remove();",but I click the second one,it is strange that the first one is removed;why?thanks everyone who can help me~~thx very much!

Angular Directive not working with *ngIf. Calling directive from component

I have two DIVs - one, that is always visible, and another one, that gets displayed after I click a button (it is toggable):
<div>
<div>
<small>ADDRESS</small>
<p [appQueryHighlight]="query">{{ address}}</p>
</div>
</div>
<div *ngIf="showDetails">
<div>
<small>NAME</small>
<p [appQueryHighlight]="query">{{ name}}</p>
</div>
</div>
My custom directive works well on the first DIV (it changes the color of letters inside the paragraph that match the query entered in an "input"), but does not work on the second DIV.
Here is an example of how "Test address" looks like when query is "addr":
Test addresswhere bold text is for example red-colored text.
But when I have name John, and query is "Joh", it should also be colored once shown with the button, but it is not.
As I understand, I need to re-run the directive after I click and toggle the second div. Also, probably I have to do this with delay, so it has time to be shown. How can I do this?

UPDATE
Problem with my directive is related to *ngFor - both DIV are located withing ngFor. I have to call directive ngOnChanges or ngOnInit only after the new list get propagated based on the query. I have no idea how to do this, and currently, directives get loaded before ngFor fully loads - this cause problems.
Here is my previous answer:
I finally managed to solve this problem, thanks to #iHazCode.
So firstly, this is probably a duplication of problem described here: Angular 4 call directive method from component
Because my directive hightlights the specific letters in paragraph based on input query, each time the query changes, the directive should fire, thus I am using ngOnChanges withing the directive.
This is not working with *ngIf, because when ngOnChanges fires, the second div and paragraph is not visible.
As a workaround, we can access the directive from out component using #ViewChildren:
#ViewChildren(QueryHighlightDirective) dirs;
And then call it's ngOnChanges method, once div is toggled. In my case, the problem was related with last occurence of the directive within the component:
toggleDetails() {
...
this.dirs.last.ngOnChanges();
}
That was exactly what I was looking for, I hope it will help someone.
In my case I also encountered another problem - the defined DIVs are within *ngFor, which is also propagated based on the query, so I have to make sure that the list will get propagated before calling ngOnChanges. I haven't find a solution for this yet.

ngIf does not show/hide elements. ngIf determines if the element exists on the DOM. You can verify this by looking at the source of your rendered page. Change the code to use ngHide/Show instead.