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
Related
I have a Next.js app that I'm deploying to vercel and am using ReactMarkDown component to render some content from a Strapi backend.
While this works locally, deployment fails with the following log:
49:54 Error: Do not pass children as props. Instead, nest children between the opening and closing tags. react/no-children-prop
<ReactMarkdown key={idx} children={content.answer} />
I assume that this is the culprit, it being unhappy with the use of "children" as a prop name, but... the ReactMarkDown component's prop to render content is... children.
I have tried this, with the following.
<ReactMarkdown >{content.answer}</ReactMarkdown>
<ReactMarkdown key={idx} children={[content.answer]} />
The first, doesn't change anything, the latter doesn't work, with the content no longer showing up.
Any suggestions greatly appreciated.
I would suggest a temporary fix would be adding this comment before the line that uses the children property.
{// eslint-disable-next-line
}
Add this on the line using the children property. There have been issues closed on eslint about how the disable comments work with jsx.
Must be on the same line, so note the formatting.
Example:
<ReactMarkdown >{content.answer}</ReactMarkdown>
{// eslint-disable-next-line
}<ReactMarkdown key={idx} children={[content.answer]} />
This way, you won't have to completely disable eslint.
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:)
I usually use react-to-print (https://www.npmjs.com/package/react-to-print) for printing React components with a low effort and great flexibility. I'm starting to write my applications with TypeScript, and this is the first time I need to combine these two things.
This is my code:
<ReactToPrint
trigger={() => <Button variant="contained" color="primary">Generar</Button>}
content={() => componentRef.current}
/>
<PrintableComponent ref={componentRef} />
To create the reference, I simply do:
const componentRef = useRef();
In JavaScript, it works, but when I use .tsx, I get an error in the "content" parameter of the ReactToPrint component and another in the ref parameter of my own PrintableComponent. Could someone help me with this?
Basically, the errors say that the interfaces do not match.
You can define the type for useRef to get rid of the ts error credit to shane935:
const componentRef = useRef<HTMLDivElement>(null)
And if you, like me, are using functional components you will get a problem trying to use that ref following react-to-print class based components. To bypass this error you can wrap your component you wish to print in a div:
<ReactToPrint
trigger={() => <Button variant="contained" color="primary">Generar</Button>}
content={() => componentRef.current}
/>
<div ref={componentRef}>
<PrintableComponent />
</div>
Everything inside this div will be printed.
Seems like a known issue when using hooks:
https://github.com/gregnb/react-to-print/issues/214
As an alternative, you can avoid the useRef hook and follow the example in the source repo which seems to work in TypeScript:
https://github.com/gregnb/react-to-print/blob/master/example/index.tsx
i.e., the first example on the npm readme doc:
https://www.npmjs.com/package/react-to-print#example
I want to use history.push to link to another page on my React app upon a button click but when I use history.push, it gives me the error Unexpected use of 'history'.(no-restricted-globals)
<ExampleComponent handleClick={history.push('/path/to/page')} text={'something'} />
Inside the ExampleComponent, I have a button with an onClick handler that calls the handleClick props
<Button onClick={() => this.props.handleClick}>{this.props.text}</Button>
update
When you use ExampleComponent component there is a problem with the variable history. As this is globally reachable as windows.history. I think you call history.push the linter gives a warning if it is window.history or not.
Here's the github link to my code https://github.com/jtylerm/Section9Lecture36
I am following along with a course from Udemy, we're writing a Pokedex site.
Warning: Failed prop type: Invalid prop `container` supplied to `Modal`.
in Modal (at PokemonModal.js:15)
in PokemonModal (at App.js:91)
in div (at App.js:70)
in App (at index.js:10)
I don't understand how 'container' is an invalid prop since that code was copied directly from the ReactBootstrap website https://react-bootstrap.github.io/components.html
Please help. Thanks!
***** UPDATE *****
Turns out you can either delete the prop 'container' entirely OR change the component from stateless to stateful, as Manolo suggests below. Hope this helps anyone with a similar error as what I had above.
You are using this inside a functional react component. In this context this === window. You should define your PokemonModal extending React.Component or React.PureComponent.
const PokemonModal = ({toggleModal, showModal, pokemon}) => {
return(
<div>
{/* ... */}
<Modal
show={showModal}
onHide={toggleModal}
container={this}
aria-labelledby="contained-modal-title"
>
{/* ... */}
</Modal>
</div>
)
}