I'm using a functional component in react to launch a popup form. I want to grab the values in the form on submission and was using the variable = React.createRef() and then a ref={variable} in the input field to retrieve them but I keep getting
Warning: findDOMNode is deprecated in Strictmode
error in the console. Is there a better way to do this?
Const AddProduct = (section) => {
const [show, setShow] = useState(false);
const handleClose = () => setShow(false);
const handleShow = () => setShow(true);
let itemName = React.createRef();
const createProduct = () => {
console.log(itemName.current.value);
handleClose();
};
return (
<>
<a href="#" className="nav-link" onClick={handleShow}>
Add Product
</a>
<Modal show={show} onHide={handleClose}>
<Modal.Header>
<Modal.Title>Create Item</Modal.Title>
</Modal.Header>
<Modal.Body>
<Form.Group controlId="itemName">
<Form.Label>Item Name</Form.Label>
<Form.Control type="text" name="name" ref={itemName} />
</Form.Group>
</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={handleClose}>
Close
</Button>
<Button variant="primary" onClick={createProduct}>
Create
</Button>
</Modal.Footer>
</Modal>
</>
);
};
Related
Any idea for modal component without using hooks, and use it inside another, class-based component?
function Example() {
const [show, setShow] = useState(false);
const handleClose = () => setShow(false);
const handleShow = () => setShow(true);
return (
<>
<Button variant="primary" onClick={handleShow}>
Launch demo modal
</Button>
<Modal show={show} onHide={handleClose}>
<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={handleClose}>
Close
</Button>
<Button variant="primary" onClick={handleClose}>
Save Changes
</Button>
</Modal.Footer>
</Modal>
</>
);
}
render(<Example />);
// example.js
function Example() {
const [show, setShow] = useState(false);
const handleClose = () => setShow(false);
const handleShow = () => setShow(true);
return (
<>
<Button variant="primary" onClick={handleShow}> Launch demo modal </Button>
<Modal show={show} onHide={handleClose}>
<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={handleClose}>Close</Button>
<Button variant="primary" onClick={handleClose}>Save Changes</Button>
</Modal.Footer>
</Modal>
</>
);
}
export default Example;
// other-component.js
import Example from './example.js'
function OtherComponent() {
return (
<>
<Example />
</>
);
}
Unable to attach Event Listener to react-bootstrap modal for mouse events using ref
Getting TypeError: Modal.addEventListener is not a function while trying to attach event listener
Error message:
Below is sample code:
import React, { useRef,useState,useEffect } from "react";
import {Button,Modal} from 'react-bootstrap';
function ExampleModal() {
const [show, setShow] = useState(false);
const handleClose = () => setShow(false);
const handleShow = () => setShow(true);
const cardRef = useRef(null);
useEffect(()=>{
const Modal = cardRef?.current;
// ****TypeError: Modal.addEventListener is not a function*****
Modal?.addEventListener("mousedown",mousedownhandler );
return () => {
// unsubscribe event
Modal?.removeEventListener("mousedown", mousedownhandler);
}}
,[])
const mousedownhandler=()=>{console.log('mousedown on modal')}
return (
<>
<Button variant="primary" onClick={handleShow}>
Launch demo modal
</Button>
<Modal ref={cardRef} show={show} onHide={handleClose} >
<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={handleClose}>
Close
</Button>
<Button variant="primary" onClick={handleClose}>
Save Changes
</Button>
</Modal.Footer>
</Modal>
</>
);
}
export default ExampleModal;
On button click i was trying to open a model (and modal opening too) and in a same modal it contain a button and on button click i was trying to open another model (and second modal opening too), but when second modal is opening i want first model to be closed. can it be possible?
Here is my sandbox demo https://codesandbox.io/embed/dreamy-herschel-cyetn?fontsize=14&hidenavigation=1&theme=dark
const Practice = () => {
const [modalShow, setModalShow] = useState(false);
const handleSubmit = event => {
setModalShow(true);
};
return (
<div>
<Button onSubmit={handleSubmit} type="submit">
Submit
</Button>
<Modals show={modalShow} onhide={() => setModalShow(false)} />
</div>
);
};
here is my modal part
const Modals = ({ show, onhide }) => {
const [modalShowsec, setModalShowsec] = useState(false);
const Validation = () => {
setModalShowsec(true);
};
return (
<div>
<Modal show={show} onHide={onhide} size="sm" aria-labelledby="contained-modal-title-vcenter" centered>
<Modal.Header closeButton>
<Modal.Title id="contained-modal-title-vcenter">HELLO</Modal.Title>
</Modal.Header>
<Modal.Body>
<p>Hi</p>
</Modal.Body>
</Modal>
<button onClick={Validation}> Validate </button>
<Modal show={modalShowsec} onHide={() => setModalShowsec(false)}>
<Modal.Header closeButton />
<Modal.Body>
<p>Hi cool</p>
</Modal.Body>
</Modal>
</div>
);
};
Call onhide inside Validation function. This will hide the first modal.
const Validation = () => {
setModalShowsec(true)
onhide()
}
Always got this error when the first time open this dialog:
Warning: findDOMNode is deprecated in StrictMode. findDOMNode was
passed an instance of Transition which is inside StrictMode. Instead,
add a ref directly to the element you want to reference
import React, { Component } from "react";
import {Button, Modal, Form} from "react-bootstrap";
class ClusterBar extends Component {
state = { show: false, clusterName: '', clusterConfigure: '' };
handleClose = () => this.setState({show: false});
handleShow = () => this.setState({show: true});
handleSave = () => {
this.setState({show: false});
console.log(this.state.clusterName, this.state.clusterConfigure);
}
handleClusterNameChange = (event) => {
this.setState({clusterName: event.target.value});
}
handleClusterConfigureChange = (event) => {
this.setState({clusterConfigure: event.target.value});
}
render() {
return(
<>
<div className="list-group">
<Button className="list-group-item list-group-item-action">cluster One</Button>
<Button className="list-group-item list-group-item-action">cluster Two</Button>
<Button className="list-group-item list-group-item-action">cluster Three</Button>
<Button className="list-group-item list-group-item-action" onClick={this.handleShow}>+</Button>
</div>
<Modal show={this.state.show} onHide={this.handleClose}>
<Modal.Header closeButton>
<Modal.Title>Add a cluster</Modal.Title>
</Modal.Header>
<Modal.Body>
<Form>
<Form.Group controlId="formClusterName">
<Form.Label>Cluster Name</Form.Label>
<Form.Control type="text" onChange={this.handleClusterNameChange} />
</Form.Group>
<Form.Group controlId="formClusterConfigure">
<Form.Label>Connnection Configure</Form.Label>
<Form.Control as="textarea" rows="3" onChange={this.handleClusterConfigureChange} />
</Form.Group>
</Form>
</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={this.handleClose}>
Cancel
</Button>
<Button variant="primary" onClick={this.handleSave}>
Save
</Button>
</Modal.Footer>
</Modal>
</>
)
}
}
export default ClusterBar
I am trying to call useMutation when I click on the "Save" button on a modal. However, the first time I click it, the variables which get sent are empty (i can see the variables in the network calls tab and all are undefined) even though when I do a console.log I can see the data.
I.e
let globalState = {};
const SessionAdd = () => {
console.log(globalState); // This always displays the correct data when I click on the "Save" button.
const [AddsessionInput, {error} ] = useMutation(addSession,{
variables: {
title:String(globalState.title),
description:String(globalState.description)
}
});
return (
<div className="AddSession">
<Button variant="primary" onClick={handleShow}>
<i className='fas fa-plus' /> Create a new Session
</Button>
<Modal show={show} onHide={handleClose} size="md">
<Modal.Header closeButton>
<Modal.Title><i className='fas fa-camera' /> Create details</Modal.Title>
</Modal.Header>
<Modal.Body> <AddSessionForm /> </Modal.Body>
<Button variant="primary" onClick={AddsessionInput}>
Save
</Button>
</Modal.Footer>
</Modal>
</div>
);
}
const AddSessionForm = () =>{
const [sessionDetails, setSessionDetails] = useState({
title:""
});
const handleSessionDetails = (evt) => {
sessionDetails[evt.target.name] = evt.target.value;
setSessionDetails(sessionDetails);
globalState = sessionDetails;
};
return(
<div>
<p><strong>Add title</strong></p>
<FormControl name="title"
onChange={handleSessionDetails}/>
<br/>
);
}
Is this the correct way to handle states when dealing with a parent component (i.e handling objects in child components from parent state)?
Thanks
I'd probably refactor it slightly:
const [AddSessionInput, {error}] = useMutation(QUERY_STRING);
const runAddSessionInput = async () => {
await AddSessionInput({ variables });
};
In your onClick:
return (
<Button variant="primary" onClick={runAddSessionInput} />
);