Menu
I am a beginner in React,Not able to debug the error
This is my code using components in React.
I am trying to simulate a google Search Image result with Image,caption and Link, but on the browser all I see is an empty screen.
The error statement is :
Uncaught Error: Minified React error #200; visit https://reactjs.org/docs/error-decoder.html?invariant=200 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
at Object.I.render (react-dom.production.min.js:238)
at <anonymous>:99:10
at n (babel.min.js:12)
at r (babel.min.js:12)
at o (babel.min.js:12)
at u (babel.min.js:12)
at E (babel.min.js:1)
The error doesn't specify which line or anything. and the link says
The full text of the error you just encountered is:
Target container is not a DOM element.
<html>
<head>
<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/[email protected]/babel.min.js"></script>
</head>
<body>
<div id = "container"></div>
<script type = "text/babel">
var destination = document.getElementsByClassName("container");
class ResImg extends React.Component{
render(){
return(
<img src = "https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.insider.com%2Fthe-batman-2021-movie-details-information-2020-2&psig=AOvVaw0AeAaWCyxcHCYi3PRMc6VS&ust=1601364735924000&source=images&cd=vfe&ved=0CAIQjRxqFwoTCJi85taqi-wCFQAAAAAdAAAAABAD"></img>
)
}
}
class ResCaption extends React.Component{
render(){
return(
<p>Batman 2021</p>
)
}
}
class ResLink extends React.Component{
render(){
return(
<a href = "https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.insider.com%2Fthe-batman-2021-movie-details-information-2020-2&psig=AOvVaw0AeAaWCyxcHCYi3PRMc6VS&ust=1601364735924000&source=images&cd=vfe&ved=0CAIQjRxqFwoTCJi85taqi-wCFQAAAAAdAAAAABAD"></a>
)
}
}
class SearchRes extends React.Component{
render(){
return(
<div>
<ResImg/>
<ResCaption/>
<ResLink/>
</div>
)
}
}
ReactDOM.render(
<SearchRes/>,destination
)
</script>
</body>
</html>
358
asked Sep 28 '20 07:09
The calendar does not render and throws the Minified React error #130, which equates to: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
#185 text: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.
This represents any node that can be rendered in a React application. React. Node can be null, a boolean, a number, a string, a React element, or an array of any of those types recursively. If you need a return type for your component render() methods then you should use React.
Error: Minified React error #130 The full text of the error you just encountered is: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.
When an exception occurs in React, the console shows as "Uncaught Error: Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings."
"Uncaught Error: Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings." How do I enable full error messages ?
ReactDOM.render ( React.createElement (Component, component_props), container ) This says that you are either using a hook outside of function component (definitely not doing that) or you have multiple versions of React.
Whenever you see such an error you can visit the page it suggests to see the full error. So, when opening https://reactjs.org/docs/error-decoder.html?invariant=200 , you can see that
Target container is not a DOM element,
meaning that you try to render your app into a wrong dom node. The problem is here:
var destination = document.getElementsByClassName("container");,
you need to use getElementById instead of getElementsByClassName
99
Just change this
var destination = document.getElementsByClassName("container");
to
var destination = document.getElementById("container");
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
