Develop Reference

Button Click inside anchor tag not working in React Js Component

Button onClick not executing the triggerThis function because it is wrapped with react-router-dom Link component
Expected behaviour: Card click should navigate to /app/url and on button click the url navigation should be prevented and should run triggerThis function.
I want onClick button prevent navigation. but when i click outside button the navigation should work .. triggerThis is a function that just console.log("hello")
<Card>
<Link to={`/app/url`}>
<h1>Title</h1>
<p>Paragraph</p>
<button onClick={triggerThis}></button>
</Link>
</Card>

You really shouldn't place interactive elements within other interactive elements, but if you want to allow the button to be independently clickable and not trigger the navigation of the wrapping Link component then you should stop the click event propagation. This prevents the click event from propagating further up the DOMtree to the Link element, thus preventing the navigation action from occurring.
Example:
const clickHandler = e => {
e.stopPropagation();
...
};
...
<Card>
<Link to="/app/url">
<h1>Title</h1>
<p>Paragraph</p>
<button onClick={clickHandler}>
...
</button>
</Link>
</Card>

onClick Removing data from components

So basically I have two components. In Component 1 there is an img. In component 2 there is a button. I need when i press the button img disappears and also button disappears.
const Icons=()=> {
return (
<div className="_icons">
<div className="icons__Top">
<img src="./icons/-48.png" alt="Twitter"/>
<figcaption>Whatever</figcaption>
</div>
</div>
const Button= () => {
return (
<div className="button">
<Button variant="outlined" className="button__rightpage" >REMOVE</Button>
<caption className="text" ></caption>
</div>
)
}

There can be more than one solution,
1)I think you need to have one parent component for both components and make one state in parent component and then pass it in icon component and give it to img and default make it to false and then from button component change that state to true.
2)without parent component -> You can also use context api to change value directly from button component and hide img.

rendering an additional pop up dialog on button click React

I am having issues with rendering a pop up loading screen. So assume i have a imported component called ( LoadingDialog ) and i want it to render when the state property, loading is true. When the user clicks a button on the current component, it triggers an api call which also changes the loading state to true, thus rendering the loading dialog.
I understand I can use conditional rendering to achive this, eg:
if(this.state.loading){
return (
<div>
<LoadingDialog />
</div>
)
}
else{
return(
<div> OTHER UI ELEMENTS </div>
)
but now i have a problem because, when my loadingDialog is rendered, my other ui (text area, background card, button ) all disappear, which is the opposite of what im trying to achieve. With this approach, i can only display my actual ui elements or the loading dialog.
I've tried separating the other ui elements into a separate container but it doesn't help as i need to call the api on click of an button and the entire problem i'm having now occurs in that child container.
I've also tried the above approach with passing a parent on click method as a prop and calling that when the button is clicked but somehow ended up with a recursive loop of the parent/child component
Heres my actual code:
if(this.state.loading){
return (
<div>
<LoadingDialog />
</div>
)
}
else{
return (
<div>
<Card className="center card">
<div className="row">
<div class="column" >
<TextField
id="outlined-name"
name="searchContent"
onChange={this.handleChange}
value={this.state.searchContent}
label="Name"
variant="outlined"
/>
</div>
<div className="column">
<Button
variant="outlined"
color="primary"
onClick={this.handleClick}
>
Search
</Button>
</div>
</div>
</Card>
</div>
);
}
and this is my handle click function:
handleClick = (event, name) => {
this.setState({loading : true})
fetch(uri)
.then(res => res.json())
.then(data => {
console.log(data);
this.setState({loading : false})
});
};
As i said before, I tried separating the UI bit on the else block to a different component but the problem still persisted. To summarise it again,
I can only render my actual ui or a popup box but not both at any given time.
I want to be able to render both at the same time, if needed.
I am very new to react and staying away from the likes of redux, hooks etc.

SOLVED Thanks to Chris G
So the issue was easily fixed by using a logical and operator to check if loading is true or false, like so {this.state.loading && <LoadingDialog />}
eg.
render(){
return(
<div>
{this.state.loading && <LoadingDialog />}
<div>
//REST OF THE STUFF THAT SHOULD BE RENDERED REGARDLESS
</div>
</div>
)
}

Javascript Onclick=window.open() function will open a new page every time I refresh the page?

So I have a DIV element that, when pressed, I want to open a new tab in a different window. The only problem is, whenever the page is refreshed or any other div element is pressed, th function is initiated as well and opens a page in another window. I'll include my code below, but I'm not sure why this is happening seeing as how I'm using onClick={window.open("https://www.thechinesewriter.com") Like I said, I only want a new tab to open when the div is pressed, not when any other items on the page are clicked or even when the page itself is refreshed.
import React from "react";
import "./Column1.css";
class Column1 extends React.Component {
render() {
return(
<React.Fragment>
<div className="rectImage">
<img className="imagePost" src={this.props.image} />
</div>
<div onClick={window.open("https://www.thechinesewriter.com")} className="downloadBut1">
<h2>
Source
</h2>
</div>
<div className="downloadBut2">
<h2>
Repository
</h2>
</div>
</React.Fragment>
)
}
}
export default Column1;

You need to call the function as a callback like this.
<div onClick={() => window.open("https://www.thechinesewriter.com")} className="downloadBut1">
Otherwise this gets called every time the component gets rendered.

You use an expression, which will execute everytime the component is rendered.
<div onClick={window.open("https://www.thechinesewriter.com")} className="downloadBut1">
You probably mean to use a function
<div onClick={() => window.open("https://www.thechinesewriter.com")} className="downloadBut1">

React-select - can't stopPropagation on valueRenderer component

I am trying to display a popover on click over a react-select selected value element as follow :
My issue happens when I click on the popover trigger, the dropdown opens and the popover too... I just want to open the popover, I tried e.nativeElement.stopPropagation, e.stopPropagation, e.preventDefault and so on without success. Here is a sandbox If you want to know how I did this and how to reproduce the issue.
https://codesandbox.io/s/pjv7vmlv3j
Thanks for you help

The react-select opens the dropdown as a reaction to onMouseDown event, not onClick and that's why any onClick={(e) => e.stopPropagation()} can't prevent to open the dropdown. You need to add onMouseDown={(e) => e.stopPropagation()} along with the onClick handler to open only the popover.
In your code the snippet below should do the trick:
<span onMouseDown={e => e.stopPropagation()} style={styles.root}>
<span style={styles.label}>{label}</span>
<OverlayTrigger
trigger="click"
rootClose
placement="bottom"
overlay={popover}
animation={false}
>
<span style={styles.trigger}>{`${selected} / ${contacts.length}`}</span>
</OverlayTrigger>
</span>

Well I found a way to cancel the event. I just add an onValueClick prop to the <Select /> and put the stopPropagation there!