I want to open a popup when I click a button on react, I have this but the popUp wont appear:
<button type="button" class="btn btn-primary" data-toggle="modal" data-target={`#${props.idMessage}`}>
{props.idMessage}
</button>
<div class="modal fade" id={props.idMessage} tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
Using the react debug tools I can see that the props.id obviously differ from each one and the value on my data-target is the same of my id, as you can see the popUp should appear:
I want to open a popup when I click a button on react, I have this but the popUp wont appear:
<button type="button" class="btn btn-primary" data-toggle="modal" data-target={`#${props.idMessage}`}>
{props.idMessage}
</button>
<div class="modal fade" id={props.idMessage} tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
Using the react debug tools I can see that the props.id obviously differ from each one and the value on my data-target is the same of my id, as you can see the popUp should appear:
Share Improve this question asked Apr 4, 2019 at 14:59 jose azevedojose azevedo 2452 gold badges3 silver badges20 bronze badges 1- hello, i don't know which library you are using but there are lots of react ui libraries out there that are easier to use that instead of using the attributes, we should be using props and state, after all we are in jsx scope not html anymore making logic like this easier to implement. Try this: react-md.mlaursen./ponents/dialogs – Lelouch Commented Apr 4, 2019 at 15:25
3 Answers
Reset to default 5Here is modern way to achieve this using React Hooks
import React, { useState } from "react";
const PopUp = ({ idMessage }) => {
// create state `open` with default as false
const [open, setOpen] = useState(false);
return (
<>
{/* click of button toggles `open` value therefore visibility */}
<button
onClick={() => setOpen(!open)}
type="button"
className="btn btn-primary"
data-toggle="modal"
data-target={`#${idMessage}`}
>
{idMessage}
</button>
{/* If open is true show your <div /> */}
{open && (
<div
className="modal fade"
id={idMessage}
tabIndex="-1"
role="dialog"
aria-labelledby="exampleModalLabel"
aria-hidden="true"
>
content
</div>
)}
</>
);
};
export default PopUp;
You could consider creating the popup as a re-usable ponent, that just renders the props.message.
Suppose you have the button in App.js, here is how you can add the click listener on it.
class App extends Component {
state = {showPopup: false};
openPopupHandler = () => {
this.setState({showPopup: true});
}
closePopupHandler = () => {
this.setState({showPopup: false});
}
render() {
let popup = null;
if(this.state.showPopup) {
popup = (<Popup message='the text you need to display' closeMe={this.closePopupHandler}/>);
}
return(
<div>
<button onClick={this.clicked}>Click me </button>
{popup}
</div>
);
}
}
And you can define the popup ponent as given below.
Popup.js
const popup = (props) => {
return (
<div>
<p>{props.message}</p>
<button onClick={props.closeMe}>Close Popup</button>
</div>
);
}
Also, style the popup ponent with the size as per your requirement and with an z-index greater than that of the parent ponent.
How about this :
class PopUp extends Component {
constructor(props) {
super(props);
this.state = {
hide: false
};
}
clicked(){
this.setState({
hide: true
});
}
render() {
return (
<div>
<button type="button" class="btn btn-primary" data-toggle="modal" onClick={() => this.clicked()} >
Click Me
</button>
{
this.state.hide?
<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">Required PopUp </div>
: null
}
</div>
);
}
}
you can use this as
<PopUp>in your code