score:0
In App.js
import React from "react";
import Model from "./Model";
class App extends React.Component {
state = { status: false, text: "" };
handleClick = () => {
this.setState(prev => ({ status: !prev.status }));
};
handleChange = e => {
this.setState({ text: e.target.value });
};
render() {
const { status, text } = this.state;
return (
<>
<button onClick={this.handleClick}>Open photo entry dialog</button>
<ChildComponent
isOpen={status}
text={text}
handleChange={this.handleChange}
handleClick={this.handleClick}
/>
</>
);
}
}
const ChildComponent = ({ isOpen, text, handleChange, handleClick }) => {
return (
<>
{isOpen && (
<Model
status={isOpen}
handleClick={handleClick}
text={text}
handleChange={handleChange}
/>
)}
</>
);
};
export default App;
In Model.js
import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import { Button, Modal, Form } from "react-bootstrap";
export default function Model({ handleClick, status, handleChange, text }) {
return (
<>
<Modal show={status} onHide={handleClick}>
<Modal.Header closeButton>
<Modal.Title>Gallary</Modal.Title>
</Modal.Header>
<Form.Group controlId="formBasicEmail">
<Form.Control
type="text"
value={text}
placeholder="Enter Something"
onChange={handleChange}
/>
</Form.Group>
<Modal.Body>
Woohoo, you're reading this text in a modal from your input:{" "}
<strong>{text}</strong>
</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={handleClick}>
Close
</Button>
<Button variant="primary" onClick={handleClick}>
Save Changes
</Button>
</Modal.Footer>
</Modal>
</>
);
}
score:0
This requires passing a function as props. I am assuming there is some relation between both the components so you must be calling the second component from the first component.
Solution
Let's call the component that contains Modal as C1 and the component that needs to open the Modal as C2
You need to pass a function as props from C1 to C2 which opens the Modal.
Define the function openModal in C1:
openModal(){ \\Function to open the Modal
this.setState({modal:true}) \\modal state is used to define the state of the modal. When it is true, the modal is open.
}
Pass openModal function from C1 to C2 by using this in C1:
<C2 openModal={this.openModal} />
Now, in C2 use this script to open the Modal:
this.props.openModal() \\Use this in the event which opens the Modal
Source: stackoverflow.com
Related Query
- how can i open a modal from other component in react js functional component react-modal
- How I can open a Modal from another component in React
- How can I prevent my functional component from re-rendering with React memo or React hooks?
- How can I set up a react modal to open from anywhere in the app?
- React - How to make a modal component that I can call from anywhere?
- How can I open a rect-bootstrap modal dialog from another Component
- How can custom Hooks in React have different state names then the state name used by the functional component from which it was called?
- How can I pass values from a functional component through a React Router Link to another functional component?
- How to initialize the react functional component state from props
- How To Declare TypeScript Static Method From React Functional Component
- How to call a component function on other component, but from the other component ? React
- How to make reactstrap modal open or close from parent component
- How do I manage state on a React component that can have state changed from the parent or from events upon it?
- Open modal from other component in ReactJS
- How can I use react useContext , to show data from context, in the same component
- How can we implement an Open with Postman button to open a postman collection link sent from a third party react application?
- I can not get the state from react router Link component using useLocation. So how can I pass it?
- How to pass data from vanilla JavaScript to React functional component
- How can I use useEffect in React to run some code only when the component first mounts, and some other code whenever an event occurs (repeatedly)?
- how can i pass functional react component to a function?
- How can I call a Parent function from a React functional component?
- How can I get value from react modal bootstrap?
- Open modal from another component click in react js
- How react functional component can use object variable which declared behind the usage? (include example)
- How to make a react component that can be controled from outside?
- How to pass function from FUNCTIONAL to CLASS component and access it outside of render( without prop ), using context in react js?
- How can I convert a class with a constructor to a functional component using React Hooks?
- How to iterate through a list of objects from api and render it to jsx page React functional component
- How Can I extend a React functional Component Prop Type?
- How Can i Add Event Handlers In Reusable React Component Created from Object Array
More Query from same tag
- Can't call this.setState inside an event listener
- ReactJS, onScroll doesn't work for dynamic navbar
- Typescript overloads with generics, type inference and React Components
- Call a nested package.json script
- React render components from string
- React.js and Isotope.js
- Mock an imported Component that is passed in as a prop
- Search form with ability to share the URL in ReactJs
- Scroll to a specific div on a new page using react router dom
- React webpack bundle not utf-8
- Trying to pass data from Express backend to React frontend with Axios, doesn't work
- Can't place a background image in next JS and Tailwind CSS
- How to force reactJS to redraw?
- Typescript isn't complaining when a React Functional Component (React.FC<Props>) with wrong props is send as a prop?
- How to save MultiSelect values in MultiStep react form using hooks
- Proper ref handling with react-simple-keyboard
- Cannot read property 'animateMarkerToCoordinate' of undefined
- Changing the list of items doesn't rerender the component when using react-beautiful-dnd
- React Dynamic Component Naming
- React gives an error when returning JSON data
- useEffect loop due to useSelector updating
- How to push the footer in MUI at the very bottom and make it stick?
- ReactJS Change the JSX from onClick function
- How to remove HTML element from DOM with React
- Sinon anonymous stub passed as a parameter
- Expand/Collapse sidebar with Redux
- Replacing HOC setState and callbacks with functional components Hooks in React
- How do I access an environment variable from within the public folder?
- Calling async function inside non-async function in React-Native - Firebase
- Close Modal in UI React on Cancel button