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>
)
}
Related
Similarly to how you can pass Markdown components to Astro components, I want to import one into a React/Preact component.
It didn't seem to be working directly when I imported the component into the React/Preact, so I tried passing them in from the parent Astro component like so:
<DemoContent
blog={(<Blog />)}
tweet={(<TweetThread />)}
highlight={(<HighlightClips />)}
client:visible
/>
...but that gives me ERROR: Expected ">" but found "/".
What is the suggested way of doing this?
(Follow-up from a discord conversation. Thanks for making this public!)
When passing Astro or Markdown components to a framework like Preact, you'll need to use "slots." You can use slot="prop-name" to wire those up like so:
<DemoContent>
<Blog slot="blog" />
<TweetThread slot="tweet" />
<HighlightClips slot="highlight" />
</DemoContent>
Then, in your Preact component, you can access blog, tweet, and highlight as props. You'll render these similar to the {children} prop:
export function DemoContent({ blog, tweet, highlight }) {
return (
<section>
{blog}
{tweet}
{highlight}
</section>
)
}
These will also map to Vue or Svelte slots if you happen to use those frameworks. Hope this helps!
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 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.
I've built my own custom react-bootstrap Popover component:
export default class MyPopover extends Component {
// ...
render() {
return (
<Popover {...this.props} >
// ....
</Popover>
);
}
}
The component is rendered like so:
// ... my different class ...
render() {
const popoverExample = (
<MyPopover id="my-first-popover" title="My Title">
my text
</MyPopover >
);
return (
<OverlayTrigger trigger="click" placement="top" overlay={popoverExample}>
<Button>Click Me</Button>
</OverlayTrigger>
);
}
Now, I want to add custom props to MyPopover component like that:
my text
And to use the new props to set some things in the popover
for example -
<Popover {...this.props} className={this.getClassName()}>
{this.showTheRightText(this.props)}
</Popover>
but then I get this warning in the browser:
Warning: Unknown props popoverType on tag. Remove these props from the element.
Now, I guess that I can just remove the {...this.props} part and insert all the original props one by one without the custom props, but In this way I lose the "fade" effect and also it's an ugly way to handle this problem. Is there an easier way to do it?
Updated answer (React v16 and older):
As of React v16, you can pass custom DOM attributes to a React Component. The problem/warning generated is no longer relevant. More info.
Original answer (React v15):
The easiest solution here is to simply remove the extra prop before sending it to the Popover component, and there's a convenient solution for doing that.
export default class MyPopover extends Component {
// ...
render() {
let newProps = Object.assign({}, this.props); //shallow copy the props
delete newProps.popoverType; //remove the "illegal" prop from our copy.
return (
<Popover {...newProps} >
// ....
</Popover>
);
}
}
Obviously you can (and probably should) create that variable outside your render() function as well.
Basically you can send any props you want to your own component, but you'd have to "clean" it before passing it through. All react-bootstrap components are cleansed from "illegal" props before being passed as attributes to the DOM, however it doesn't handle any custom props that you may have provided, hence why you have to do your own bit of housekeeping.
React started throwing this warning as of version 15.2.0. Here's what the documentation says about this:
The unknown-prop warning will fire if you attempt to render a DOM element with a prop that is not recognized by React as a legal DOM attribute/property. You should ensure that your DOM elements do not have spurious props floating around.
[...]
To fix this, composite components should "consume" any prop that is intended for the composite component and not intended for the child component.
For further reading, check this page from the official react site.
I've built my own custom react-bootstrap Popover component:
export default class MyPopover extends Component {
// ...
render() {
return (
<Popover {...this.props} >
// ....
</Popover>
);
}
}
The component is rendered like so:
// ... my different class ...
render() {
const popoverExample = (
<MyPopover id="my-first-popover" title="My Title">
my text
</MyPopover >
);
return (
<OverlayTrigger trigger="click" placement="top" overlay={popoverExample}>
<Button>Click Me</Button>
</OverlayTrigger>
);
}
Now, I want to add custom props to MyPopover component like that:
my text
And to use the new props to set some things in the popover
for example -
<Popover {...this.props} className={this.getClassName()}>
{this.showTheRightText(this.props)}
</Popover>
but then I get this warning in the browser:
Warning: Unknown props popoverType on tag. Remove these props from the element.
Now, I guess that I can just remove the {...this.props} part and insert all the original props one by one without the custom props, but In this way I lose the "fade" effect and also it's an ugly way to handle this problem. Is there an easier way to do it?
Updated answer (React v16 and older):
As of React v16, you can pass custom DOM attributes to a React Component. The problem/warning generated is no longer relevant. More info.
Original answer (React v15):
The easiest solution here is to simply remove the extra prop before sending it to the Popover component, and there's a convenient solution for doing that.
export default class MyPopover extends Component {
// ...
render() {
let newProps = Object.assign({}, this.props); //shallow copy the props
delete newProps.popoverType; //remove the "illegal" prop from our copy.
return (
<Popover {...newProps} >
// ....
</Popover>
);
}
}
Obviously you can (and probably should) create that variable outside your render() function as well.
Basically you can send any props you want to your own component, but you'd have to "clean" it before passing it through. All react-bootstrap components are cleansed from "illegal" props before being passed as attributes to the DOM, however it doesn't handle any custom props that you may have provided, hence why you have to do your own bit of housekeeping.
React started throwing this warning as of version 15.2.0. Here's what the documentation says about this:
The unknown-prop warning will fire if you attempt to render a DOM element with a prop that is not recognized by React as a legal DOM attribute/property. You should ensure that your DOM elements do not have spurious props floating around.
[...]
To fix this, composite components should "consume" any prop that is intended for the composite component and not intended for the child component.
For further reading, check this page from the official react site.