Could someone point out what's wrong with this piece of code for rendering a component using React. It keeps throwing an error saying "Element type is invalid ... check render method for App" and I can't see the problem.
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/app';
ReactDOM.render(<App />, document.getElementById('container'));
APP
import React from 'react';
import AppActions from '../actions/app-actions';
import Catalog from './app-catalog';
export default class App extends React.Component {
render(){
return (
<div className="container">
<Catalog />
</div>
)
}
}
CATALOG
import React from 'react';
import AppStore from '../stores/app-store';
import CatalogItem from './app-catalog-item';
function getCatalog(){
return {items: AppStore.getCatalog()}
};
class Catalog extends React.Component {
constructor(){
super();
this.state = getCatalog();
}
render(){
let items = this.state.items.map(item => {
return <CatalogItem key={item.id} item={item} />
});
return (
<div className="row">
{items}
</div>
)
}
}
Any help would be much appreciated.
You just need to export default something in Catalog:
export default class Catalog extends React.Component {
...
Otherwise, when you use the import statement nothing will import:
import Catalog from './app-catalog';
Add export to Catalog
export default class Catalog extends React.Component {
}
because now from catalog there is nothing to import, and when you do
import Catalog from './app-catalog';
you will get undefined and undefined is not valid React component, that's why you get error
Related
Hello i want to pass props from index.html to App.tsx as you see i'm using typescript. so i want to do it with typescript.
my code
//index.html
<div id="root" name="test"></div> //props name test
//Index.tsx
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
var container =document.getElementById('root');
ReactDOM.render(
<App name={container.getAttribute('name')} />
,
container
);
serviceWorker.unregister();
//i'm sorry i should have provided this my knowledge about typescript is very low
//App.tsx
import React from 'react';
import logo from './logo.svg';
import './App.css';
class App extends React.Component {
render(){
return (
<div className="App">
<p>{this.props.name}</p>
</div>
)
}
}
export default App;
You should add props to your App component constructor:
class App extends React.Component {
constructor(props) {
super(props);
}
render(){
I am having problems in export a Context from a Component.
The component that holds the context is below.
import React, { Component, createContext} from 'react';
export const MyContext = React.createContext('');
export default class ComponentOne extends Component {
....
....
render(){
return(
<MyContext.Provider value={'value1'}>
<div>....</div>
</MyContext.Provider>
)
}
}
The component that wants to import the Context is below
import React, { Component} from 'react'
import { MyContext } from "../ComponentOne/Index.js"
export default class ComponentTwo extends Component{
render(){
console.log(this.props)
return(
<MyContext.Consumer>
</MyContext.Consumer>
)
}
}
The Error I'm getting is
TypeError: render is not a function
Context Provider requires a children.
<MyContext.Provider value={'value1'}>
<ComponentTwo />
</MyContext.Provider>
The context is available to MyContext.Provider children.
In your case, you need to render ComponentTwo within the provider, and as a consumer, read the value provided:
import React from 'react';
import ReactDOM from 'react-dom';
export const MyContext = React.createContext('');
class ComponentTwo extends React.Component {
render() {
return (
<MyContext.Consumer>{value => <div>{value}</div>}</MyContext.Consumer>
);
}
}
class ComponentOne extends React.Component {
render() {
return (
<MyContext.Provider value={'value1'}>
<ComponentTwo />
</MyContext.Provider>
);
}
}
ReactDOM.render(<ComponentOne />, document.getElementById('root'));
The error might be because of not reading the value inside the Context.Consumer.
Reference: Context API.
//App.js
import React from 'react';
import Form from './Form'
class App extends React.Component{
render(){
return
<Form something={true}>
}
}
//Form.js
import React from 'react';
export default class Form extends React.Component{
render(){
return()
}
}
//Index.js
import Form from './Form';
import React from 'react';
export default (props)=>{
<Form {...props} />
}
The directory structure:
(Components
->App.js
->(Form -> Form.js, Index.js))
In App.js which component would Form be referring to because im importing from a folder? Both files insider this folder have a default export.
So why is the prop passed into index.js instead of form.js?
I am trying to learn to use react native and am following along with this YouTube tutorial. I have encountered an error stating the following, "Unable to resolve the module ... from ...: could not resolve ... as a file nor folder." I am fairly certain that the file path used is correct and I have followed the video very closely, and it appears to work in this video. Any help with this would be greatly appreciated as I am unfamiliar with using components in react.
index.js
import React, {Component} from 'react';
import { AppRegistry, Text, View } from 'react-native';
import App from './App';
import Component1 from './app/components/Component1/Component1';
export default class myapp extends Component {
render() {
return(
<View>
<Component1 />
</View>
);
}
constructor() {
super();
}
}
AppRegistry.registerComponent('myapp', () => myapp);
component1.js
import React, {Component} from 'react';
import { AppRegistry, Text, View } from 'react-native';
import App from './App';
export default class Component1 extends Component {
render() {
return(
<View>
<Text>This is Component 1.</Text>
</View>
);
}
constructor() {
super();
}
}
AppRegistry.registerComponent('Component1', () => Component1);
Try this path to your component
import Component1 from './app/components/Component1/component1';
I am writing code with react and I just started using redux (because I require a container of sorts). However, I have been stuck at one place for a bit now.
I get this error -
Invariant Violation: Could not find "store" in either the context or
props of "Connect(HomePage)". Either wrap the root component in a
, or explicitly pass "store" as a prop to
"Connect(HomePage)".
I tried googling, and according to the troubleshooting section of react-redux, this can be checked using these three things:
1. Make sure you don’t have a duplicate instance of React on the page.
2. Make sure you didn’t forget to wrap your root component in < Provider>.
3. Make sure you’re running the latest versions of React and React Redux.
I have the following code that is the root (which is where the store is defined with the provider) -
import React from 'react';
import { Router, browserHistory } from 'react-router';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import reduxThunk from 'redux-thunk';
import routes from '../Routes';
import reducers from './reducers/reducers';
import actions from './actions/actions';
export default class AppRoutes extends React.Component {
render() {
const store = createStore(reducers, applyMiddleware(reduxThunk));
return (
<Provider store={store}>
<Router history={browserHistory} routes={routes} onUpdate={() => window.scrollTo(0, 0)}/>
</Provider>
);
}
}
And this error only happens on one of the two components I have -
// No error when connected only in this component
import React from 'react';
import { connect } from 'react-redux';
import * as actions from './actions/actions';
class Dashboard extends React.Component {
constructor(props) {
super(props);
}
render() {
return <h1>Hello, {this.props.isAuthenticated.toString()}</h1>;
}
}
function mapStateToProps(state) {
return {
content: state.auth.content,
isAuthenticated: state.auth.authenticated
};
}
export default connect(mapStateToProps, actions)(Dashboard);
// Error thrown when I try to connect this component
import React from 'react';
import LoginPage from './LoginPage';
import Dashboard from './Dashboard';
import Loading from './Loading';
import { connect } from 'react-redux';
import * as actions from './actions/actions';
class HomePage extends React.Component {
constructor(props) {
super(props);
this.setState({
loading: true
});
}
render() {
var inPage = undefined;
if(this.props.isAuthenticated) {
console.log('Logged in');
inPage = <Dashboard user = {HomePage.user}/>;
}
else if (this.state.loading){
console.log('Loading');
inPage = <Loading />;
}
else {
console.log('Login');
inPage = <LoginPage />;
}
return (
<div>
{inPage}
</div>
);
}
}
function mapStateToProps(state) {
this.setState({
loading: false
});
return {
content: state.auth.content,
isAuthenticated: state.auth.authenticated
}
}
export default connect(mapStateToProps, actions)(HomePage);
Not sure if this is where your issue lies or not. So I may be way off base.
But, I would check to be sure you are passing down the children to your components. The way I've done this is in my App class as such:
import React, {PropTypes} from 'react';
import { connect } from 'react-redux';
class App extends React.Component{
render(){
return(
<div className="container-fluid">
{this.props.children}
</div>
);
}
}
App.propTypes={
children: PropTypes.object.isRequired
};
export default connect()(App);