I am having an issue with this code in my React project. It would show a div with a warning about filenames to upload.
<Collapse in={this.state.open} id={"z-hover"}>
<div>
<ul>
{ FilesAllowed.files.map((fileName, index) => {
return <li key={index}>{fileName}</li>
})}
</ul>
</div>
</Collapse>
I use a button to display the Collapse element (from react-bootstrap), but when the Collapse gets displayed, console returns this error (I can confirm it comes exactly from the Collapse element):
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. Learn more about using refs safely here: https://reactjs.org/link/strict-mode-find-node
Edit: I put my functional code over here in codesandbox.
how could we do to avoid this warning? Thank you for reading:)
Related
I very new to React, and have run into an issue, which I really cant seem to find any solution on...
Basically, I have a button which triggers a state to open/hide a modal component... When clicking the button, im getting the error:
index.js:1 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. Learn more about using refs safely here:
So I tried adding a ref to my Modal component, didnt work, also tried creating a wrapper around the Modal component with a ref, didn't help either?
I got the error after adding the connect() from redux - Before adding the connect() method to the component, I didn't get an error?
The code is VERY simple:
<div>
<button onClick={toggleTrueFalse}>Click here to open a modal</button>
<CSSTransition
in={showModal}
timeout={300}
classNames="dialog"
unmountOnExit
>
<Modal modalHeaderContent={modalHeaderContent} modalContent={modalContent}/>
</CSSTransition>
</div>
the method to change the state of the modal is:
const [showModal, setShowModal] = useState(false);
const toggleTrueFalse = () => setShowModal(!showModal);
Im guessing the solution would be rather simple, but just cant seem to find any solution ?
Ok, so I found a working solution as the GIThub page of react-transition-group:
https://github.com/reactjs/react-transition-group/issues/668
I am trying to use a menu list to navigate through my application. Although, the app and routes are working fine i get some warnings in console using this piece of code :
{props.itemList.map((item, index) =>(
<div key={index}>
<MenuItem component={NavLink} to={item.to} onClick=
{handleClose} activeClassName={classes.topNavLinkActive}
className={classes.topNavLink}>
{item.name}
<Icon className={classes.navIcon}>{item.icon}</Icon>
</MenuItem>
</div>
))}
The warnings I get are :
Warning: Failed prop type: Invalid prop component supplied to ForwardRef(ButtonBase). Expected an element type that can hold a ref. Did you accidentally provide a plain function component instead?
index.js:1375 Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?
Can someone please explain why forward referencing is required here?
It seems like the error is about misusing the component property. The docs say:
The component used for the root node. Either a string to use a DOM element or a component.
According to MenuItem API, component property is of type elementType. The type definition file would show it's implementing JSX.IntrinsicElements interface (Which describe standard HTML tags).
NavLink element is a React component. Try providing a standard html tag name (string) or an actucal DOM node referance instead.
components: DropdownItem
reactstrap version ^8.0.0
react version ^16.8.6
bootstrap version ^4.3.1
I am using reactstrap dropdown. And I am trying to populate the dropdown items using a map function
render() {
return (
<Dropdown isOpen={this.state.open} toggle={this.toggle}>
<DropdownToggle caret>
{this.props.name}
</DropdownToggle>
<DropdownMenu>
{this.props.items.map(function(item) {
return(
<DropdownItem key={item}>
<text>{item}</text>
</DropdownItem>
);
})}
</DropdownMenu>
</Dropdown>
);
}
If I do not wrap the {item} inside a tag(div or text) I get the following error while running test case.
console.error node_modules/prop-types/checkPropTypes.js:20
Warning: Failed prop type: Invalid prop children supplied to DropdownItem, expected a ReactNode.
in DropdownItem
Just curious to know why am I getting the warning if I do not wrap it in a tag?
You are getting the warning because the DropdownItem is expecting a node as a child, and is not able to infer if your item is a valid react node or not, then throws the warning.
You could try wrapping the item in a <React.Fragment>, but I'm afraid it will not work, according to documentation on propTypes:
// Anything that can be rendered: numbers, strings, elements or an array // (or fragment) containing these types. optionalNode: PropTypes.node,
The good news are that propTypes checking only happens in development mode, once you transpile your app all warnings related to propTypes are gone, if you don't want to add the extra element and can live with the warning everything should be good.
I was getting this error, with a similar code, and it turned out to be that the value of item was an object and not a node or text.
More detailed trace:
warning.js:33 Warning: Unknown event handler property `onKeyboardFocus`. It will be ignored.
in div (created by IconMenu)
in div (created by IconMenu)
in IconMenu (created by DropdownMenu)
in div (created by DropdownMenu)
I have an IconMenu with a an IconButtonElement prop. For some reason it keeps throwing this warning. Why? What is it?
Sample code that triggers is:
<IconMenu
iconButtonElement={
<div>
<IconButton onClick={this.handleTouchTap}>
<div >
<img src={require("../../settingsicon.svg")}/>
</div>
</IconButton>
</div>}
open={this.state.open}
anchorOrigin={{horizontal: "right", vertical: "bottom"}}
targetOrigin={{horizontal: "right", vertical: "top"}}
>
<MenuItem
className={someClass}
onClick={this.handleLogOutClick}
>
<span className={someClass}Hello</span>
</MenuItem>
<Divider className={someClass}/>
<MenuItem className={someClass}>
<span className={someClass}>Goodbye</span>
</MenuItem>
</IconMenu>
It's a pretty simple example almost copy-pasted from the documentation with a few functions to the menuitems, but nothing that should throw an error such as this. Even when I made a complete barebone example - it still throws the warning. It's a bit ugly to have in the console every time the page loads :)
IconMenu passes the onKeyboardFocus prop to the element defined in iconButtonElement, which would be fine if it were a React component (like IconButton, as the docs suggest), but the warning occurs because you’ve wrapped it in a div and onKeyboardFocus isn’t a supported DOM event (it is a property in the IconButton API).
You should remove the outer div in iconButtonElement.
onKeyboardFocus defaults to a no-op function and is passed unconditionally. Since you aren’t specifying it as a prop for IconMenu the effect will be the same if you remove the wrapping div in iconButtonElement: it’ll do nothing, but the warning will no longer occur.
If you were using the onKeyboardFocus prop, removing the div or replacing it with another component that passes this prop to its child would be the only ways to ensure that it gets to IconButton.
I wouldn’t submit an issue, as a couple have already been submitted and closed:
#6056
#5071
I'm building a Menu component which renders a list of links which are created using the react-router Link component.
This is the code which renders each item of the menu:
<li
style={{opacity: this.props.isDragging ? 0 : 1}}
className="list">
<Link to={ this.props.list.url }
activeClassName="active"
className={ this.props.owner && 'draggable'}>
<span>{ this.props.list.title }</span>
{ this.props.owner ?
<div className="list-controls">
<span className="glyphicon
glyphicon-pencil"
aria-hidden="true"
onClick={this.setEditMode.bind(this, true)}>
</span>
<span className="glyphicon
glyphicon-remove"
aria-hidden="true"
onClick={this.deleteList.bind(this)}></span>
</div> : null
}
</Link>
</li>;
The menu is dynamic. This means that navigating to another url may re-render the menu with a different list of links. The problem is that when the menu is re-rendered, I get the following exception:
Uncaught Error: Invariant Violation: findComponentRoot(..., .0.0.0.4.$12.0): Unable to find element. This probably means the DOM was unexpectedly mutated (e.g., by the browser), usually due to forgetting a '<tbody>' when using tables, nesting tags like '<form>, <p>, or <a>', or using non-SVG elements in an <svg>' parent. Try inspecting the child nodes of the element with React ID ``.
I've checked that the .0.0.0.4.$12.0 element is the <a> tag generated by the Link component in the first render.
I've also checked that if I don't use the Link component (and, for example, use a simple <a> tag instead), the exception goes away. Any thoughts?
UPDATE: Apparently the error showed up when I started using react-router-redux (formerly redux-simple-router).
I ran into the same issue on a project using redux-simple-router (now react-router-redux) and was able to fix it by changing which lifecycle methods I was using to dispatch actions (which I was using to rerender a component with different <Link> components).
I created a reduced example in a gist which I got working with this revision.
In the gist there is a <Page> component which dispatches a SYNC action immediately and then a DONE action after 100ms which changes render() to show a loading indicator. Once loaded, the component was rendering some conditional elements, and one of them was a <Link> which was causing the same Invariant Violation.
Originally I was dispatching the actions from within the page's componentWillReceiveProps lifecycle method. When I changed it to componentDidUpdate the error went away. Here's the relevant code that I changed:
- componentWillReceiveProps(nextProps) {
- if (nextProps.params.param !== this.props.params.param) {
- nextProps.dispatch(fetch())
- }
- }
+ componentDidUpdate(prevProps) {
+ if (prevProps.params.param !== this.props.params.param) {
+ this.props.dispatch(fetch())
+ }
+ }
On a side note, I noticed that the error wasn't exclusive to rerendering <Link> components. I was able to recreate the same error when using any element (like a <span> or <a>) with an onClick handler).