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.
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 have a class based component by itself that is warning
Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?
In addition I am not able to reference the ref
Here is a code sandbox. https://codesandbox.io/s/inspiring-currying-023wf?file=/src/App.js
Turns out Row within reactstrap must be a functional components.
Therefore instead of
<Row ref={this.myRef}>
...
</Row>
I had to use
<div ref={this.myRef}>
<Row>
...
</Row>
</div>
The Row component within react strap is a functional component and therefore is not an instance so it cannot have the ref= attribute.
Check out the documentation here. https://reactjs.org/docs/refs-and-the-dom.html#refs-and-function-components. And this link as well https://reactjs.org/docs/forwarding-refs.html if you want to use refs on that particular component.
You could also choose to override the component with a custom class component if you want to expand the usage.
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:)
{this.state.selectedChart.map(item => {
console.log(item.name)
return <div className="chartDisplayItem">
<item.name data={data} options={options} />
</div>
})}
item.name returns Bar. I'm trying to get this working as a chart but get the errors of.
Warning: Each child in a list should have a unique "key" prop.
Warning: is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements.
Warning: The tag is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.
<div className="chartDisplayItem"> you should pass unique key to the div, have a look at doc here https://reactjs.org/docs/lists-and-keys.html
<item.name is not an HTML element, better to wrap it as a functional component and then render it, e.g., <Item values={item.attributes} /> but here Item will be a different component, which will render the items on the basis of its attributes for example name
<item.name is not an HTML element, it's your custom name, DOM will not recognize a node named bar.
Warrning 1:
Use key attribute for html elements or React Components and initialize with index like below codes
Warning 2: Change item.name to Item.Name
Warning 3: when you dont use PascalCase for React Component browser known your Component as html element and warn unknown html emelent
{this.state.selectedChart.map((Item, index) => {
console.log(Item.name)
return <div key={index} className="chartDisplayItem">
<Item.name data={data} options={options} />
</div>
})}
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>
)
}