i have a razor page and i want to render a class React.Component inside it. If i render a single page it works but if i import in the App class a Child component throw me the following error:
Warning: React.createElement: type is invalid — expected a string
(for built-in components) or a class/function (for composite
components) but got: object. You likely forgot to export your
component from the file it’s defined in, or you might have mixed up
default and named imports.Uncaught Invariant Violation: Element type is invalid: expected a
string (for built-in components) or a class/function (for composite
components) but got: object.
What did i miss to import Child correctly?Or i have to change React.createElement in order to have a class that is modularized?
App.jsx:
import { Child } from './Components/Child';
class App extends React.Component{
componentDidMount() {
}
render() {
console.log(this.props)
const list = this.props.Property1;
return (
<div>
<ul>
{list.map(item => (
<li key={item.name}>{item.name}</li>
))}
</ul>
<Child></Child>
</div>
);
}
}
Child.jsx
export class Child extends React.Component {
componentDidMount() {
}
render() {
return (
<div>
Sono il figlio del component padre : {this.props.data}
</div>
);
}
}
Index.cshtml:
@using Newtonsoft.Json;
@using SportData.Web.Models;
@using System.Web.Optimization;
@model SportContainer
<div id="App">
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/remarkable/1.7.1/remarkable.min.js"></script>
<script src="@Url.Content("~/js/app.jsx")" type="module" ></script>
<script src="@Url.Content("~/js/Components/Child.jsx")"></script>
<script>
var modelObject = @Html.Raw(Json.Serialize(Model.sportList));
ReactDOM.render(
React.createElement(App, { Property1: modelObject }),
document.getElementById("App")
);
</script>