I have a modal component called Modal.js and a main page component called Apps.js. What i want to achieve is, how can i load the modal box in modal.js as i navigate in to Apps.js. i.e I want to call Modal.js component first in my Apps.js component. The modal box should trigger and pop up once any user tries to load page Apps.js. How do i achieve that ?
PS: New to React
Modal.Js
function Transition(props) {
return <Slide direction="up" {...props} />;
}
export default class AlertDialogSlide extends React.Component {
state = {
open: false,
};
handleClose = () => {
this.setState({ open: false });
};
render() {
return (
<div>
<Dialog
open={this.state.open}
TransitionComponent={Transition}
keepMounted
onClose={this.handleClose}
aria-labelledby="alert-dialog-slide-title"
aria-describedby="alert-dialog-slide-description"
>
<DialogTitle id="alert-dialog-slide-title">
</DialogTitle>
<DialogContent>
</DialogContent>
</Dialog>
</div>
);
}
}
Apps.JS
class Carts extends Component {
componentDidMount(){
}
}
Image
You can pass your open state via props.
You can do the following code into your modal file:
componentDidMount () {
this.setState({open: this.props.modalOpen})
}
Then into your App.js or another file, you just do:
<AlertDialogSlide modalOpen={true} />
Related
I want to roll my own custom alert, but don't want to touch the render or state of components that currently call the default window.alert().
I'm using React 15.x
function injectDialogComponent(message: string){
const modal = <Modal>{message}</Modal>
document.body.appendChild(modal) //this errors, but how would I do something like this?
}
I've tried
ReactDOM.render(modal,document.body.appendChild(document.createElement('div)
but doesn't work
You can create you html node, append it to you root element and then append your React <Modal> in you newly created div modal :
React.render(<Modal>{message}</Modal>, document.getElementById('modal'))
class Modal extends React.Component {
render() {
return (
<dialog id='modal' style={{width: "80%", height: "80%", marginTop: 10, backgroundColor: '#eee'}} open
>
<p>{this.props.children}</p>
</dialog>
);
}
}
class App extends React.Component {
openModal = message => {
let modal = document.createElement('div');
modal.id = 'modal';
document.getElementById('root').appendChild(modal)
React.render(<Modal>{message}</Modal>, document.getElementById('modal'));
}
render() {
return (
<div>
<button onClick={() => this.openModal("Hello")}>Open Modal</button>
</div>
);
}
}
React.render(<App />, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.0/react.min.js"></script>
<div id="root"></div>
I'm currently building a new React application, and am having a bit of trouble understanding the basics; I'm a complete beginner.
Bascially, what I need to do is have a button that, when clicked, opens up a container. Here is my thought process:
Create a main component, named "App". Within App, return a button.
The button, when clicked, should call another component that opens the container.
Some of what I have started on the code so far:
class handleClick extends React.Component{
constructor(props){
super(props);
this.state = {
isClicked: false
};
render(){
return(
);
}
}
}
function App(props){
//HAVE A COMPONENT TO TRIGGER THE CONTAINER
return(
<div>
<button>
Open photo entry dialog
</button>
</div>
);
I have no idea what to do. Any logic tips?
Thanks in advance!
To create model popup from parent to child component. Sample Demo App using react-bootstrap
npm install react-bootstrap bootstrap
Sample Code
App.js
import Model from "./Model";
class App extends React.Component {
state = { status: false };
handleClick = e => {
this.setState(prev => ({ status: !prev.status }));
};
render() {
const { status } = this.state;
return (
<>
<button onClick={this.handleClick}>Click to opent model</button>
{status && <Model status={status} handleClick={this.handleClick} />}
</>
);
}
}
Model.js
import "bootstrap/dist/css/bootstrap.min.css";
import { Button, Modal } from "react-bootstrap";
export default function Model({ handleClick, status }) {
return (
<>
<Modal show={status} onHide={handleClick}>
<Modal.Header closeButton>
<Modal.Title>Modal heading</Modal.Title>
</Modal.Header>
<Modal.Body>Woohoo, you're reading this text in a modal!</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={handleClick}>
Close
</Button>
<Button variant="primary" onClick={handleClick}>
Save Changes
</Button>
</Modal.Footer>
</Modal>
</>
);
}
https://o1z0p.csb.app/
I want to control of 'Opening and Closing Modals' without using Redux. If I use Redux, i create a variable as isVisible and control it with setting a value as true or false. But, If I dont use Redux, i cant solve problem that explained below.
It's the code that I call modal function.
<TouchableOpacity onPress={ () => this.setState({ visibleModal: true ])}>
<Text> Press me! </Text> </TouchableOpacity>
<ProfileModals isVisible={this.state.visibleModal} />
Main Modal function:
export default class ProfileModals extends Component {
state = {
visibleModal: this.props.isVisible,
modal: "changeName"
};
render() {
const {visibleModal} = this.state;
return (
<Modal
isVisible={this.state.visibleModal}
backdropColor="black"
backdropOpacity={0.5}
animationOut="fadeOut"
onBackdropPress={() => this.setState({ visibleModal: false })}
swipeDirection={"down"}
onSwipeComplete={() => this.setState({ visibleModal: false })}
>
<View>
<Text>Hello!</Text>
</View>
</Modal>
);
}
}
When I press the button at the first time, Modal run correctly. After closing the modal, I press the button second time, It doesn't run anymore. Because of this.state.visibleModal value (in ProfileModal Component) is false, not this.props.isVisible.
How can i solve this problem?
dont store the modal's visibility in the state of the modal component, allow it to flow through props from the parent, follow this approach:
class Parent extends Component {
state = {
modalVisible: false,
};
openModal = () => this.setState({ modalVisible: true });
closeModal = () => this.setState({ modalVisible: false });
render() {
const { modalVisible } = this.state;
return (
<OtherStuff>
<Button onPress={this.openModal} />
<MyModal
visible={modalVisible}
closeModal={this.closeModal}
/>
</OtherStuff>
);
}
}
class MyModal extends Component {
render() {
const { visible, closeModal } = this.props;
return (
<Modal isVisible={visible}>
<Button onPress={closeModal} />
</Modal>
);
}
}
I get a problem to get new data in parent component (Profile) after update data in child component (ProfileEdit), here I create a simple script in order easy to understand, default component is Profile, why cannot show alert in Profile after back from ProfileEdit, please give advices or correct my script how to show alert after back from ProfileEdit.
Profile.js
export default class Profile extends Component {
componentDidMount() {
alert('Success');
}
toProfileEdit() {
this.props.navigation.navigate('ProfileEdit');
}
render() {
return (
<View>
<Button
onPress={() => this.toProfileEdit()}
title="Learn More" />
</View>
)
}
}
ProfileEdit.js
export default class ProfileEdit extends Component {
backTo() {
this.props.navigation.navigate('Profile');
}
render() {
return (
<View>
<Button
onPress={() => this.backTo()}
title="Learn More" />
</View>
)
}
}
Please anyone help me to solve this problem.
Thanks.
Profile already mount then componentWillMount will not call again on the back action. You can pass the function with prop action.
export default class ProfileEdit extends Component {
backTo() {
this.props.navigation.navigate('Profile');
}
render() {
return (
<View>
<Button
onPress={() => { this.props.something(); this.backTo()}}
title="Learn More" />
</View>
)
}
}
Pass function which name is something, call it after you can go back.
First I define this component to reuse with modal windows
Template 1:
...
import Modal from 'react-native-modal';
class CustomModal extends Component {
constructor(props){
super(props);
}
componentWillReceiveProps(nextProps){
this.setState({
visible: nextProps.isVisible
})
}
state = {
visible: false
}
render() {
return (
<TouchableWithoutFeedback
onPress={()=>{
this.setState({
visible: false
});
}}
>
<Modal
isVisible={this.state.visible}
>
<TouchableWithoutFeedback onPress={() => {}}>
<View>
{this.props.content}
</View>
</TouchableWithoutFeedback>
</Modal>
</TouchableWithoutFeedback>
);
}
}
Now in a second component I call it:
import Modal from './common/modal';
return (<Modal
isVisible={this.state.showModal}
content={this.renderMyContent()}
/>
)
Clicking in a button I setState showModal : true, my modal is open, I can click outside the modal and actually the modal disappear but my state.showModal still being : true, how can I update the state in this view?
You can pass through a callback to the onModalHide prop of react-native-modal.
In your CustomModal:
<Modal onModalHide={this.props.onModalHide} ... />
In your "second template"
<Modal onModalHide={() => this.setState({ showModal: false })} ... />.
Note also that there's no need to track visibility within your CustomModal's state, since it already has its visibility in a prop. Just pass the prop down to the inner Modal directly: <Modal isVisible={this.props.isVisible} .../>
Call this.setState({showModal: false}) also in React we refer to these as components not "templates"
Create a function hideModal in the class where you are calling <Modal /> like this:
hideModal = () => {
this.setState({showModal: false})
}
and pass it to the <Modal /> as a prop follows:
import Modal from './common/modal';
return (<Modal
isVisible={this.state.showModal}
content={this.renderMyContent()}
hideModal={this.hideModal}
/>
)
And for closing call the hideModal prop as passed above from your CustomModal component as follows:
...
import Modal from 'react-native-modal';
class CustomModal extends Component {
constructor(props){
super(props);
}
componentWillReceiveProps(nextProps){
this.setState({
visible: nextProps.isVisible
})
}
state = {
visible: false
}
render() {
return (
<TouchableWithoutFeedback
onPress={()=>{
this.props.hideModal()
}}
>
<Modal
isVisible={this.state.visible}
>
<TouchableWithoutFeedback onPress={() => {}}>
<View>
{this.props.content}
</View>
</TouchableWithoutFeedback>
</Modal>
</TouchableWithoutFeedback>
);
}
}