So, I just started with react and i'm having troubles displaying my class component in the browser.
Here's my code...
import React, { component } from 'react'
class Hello extends component {
render() {
return <h1>class component</h1>
}
}
export default Hello
The problem is in component, it should be Component (in PascalCase)
Related
import React,{Component} from 'react';
Class Welcome extends Component{
render() {
return <h2>Class component</h2>;
}
}
export default Welcome
Above simple for class component is giving me error.
class must be in lower letters. it's a reserved language word. I leave some extra enhancements.
import React, { Component } from 'react';
class Welcome extends Component {
render() {
return (<h2>Class component</h2>);
}
}
export default Welcome
The following is giving me an error in React v16.0. The error I'm getting is:
TypeError: Cannot read property 'createElement' of undefined
import { React, Component } from 'react';
class MyComponent extends Component {
render() {
return(
<div>Hello World!</div>
);
};
};
If I change it to the following, it works.
import React from 'react';
class MyComponent extends React.Component {
// Omitted for brevity
}
I'm aware of some changes from v15.x to 16.x but I'm not clear about this one.
Your import needs to be the following: import React, { Component } from 'react';
React is your standard default export as before but Component is a named export.
import React, { Component } from 'react';
class one extends React.Component
{
constructor()
{
super();
this.state = {
number:26
}
}
render()
{
return(
<div></div>
);
}
}
export default one;
import React, { Component } from 'react';
import one from './one'
class HomePage extends React.Component
{
render()
{
return(
<div>{one.state.number}</div>
);
}
}
export default HomePage;
is it possible to access number state
is there any way to access state of one component into another component?
please suggest me if any solution is present.
As Shubam has explained it, Though I would like to form it as a complete answer
First of all, I would like to let you know that Never Use lowercase letters to name your React Components.So name your component to One instead of one.
Now Comming back to your question:-
No This is not Possible, If your app contains few components then it's better to pass the state object as the props, But if your app contains too many components then better to use predictable state containers like Redux or Flux rather than passing state as props.
So you may apply these changes and I hope You will get What You Desire:-
One Component:-
import React, { Component } from 'react';
import Homepage from './homepage';
class One extends React.Component
{
constructor()
{
super();
this.state = {
number:26
}
}
render()
{
return(
<Homepage data={this.state}/>
);
}
}
export default One;
Homepage Component:-
import React, { Component } from 'react';
class Homepage extends React.Component
{
render()
{
console.log("this is homepage",this.props);
return(
<div>{this.props.data.number}</div>
);
}
}
export default Homepage;
Please Raise Your doubts if any, Or if you find any error in it.
I am trying to learn Event in ReactJS.
I created 2 components
ChildComponent is
import React, { Component } from 'react';
// App component - represents the whole app
export default class ChildComponent extends Component {
render() {
return (
<button onClick={this.props.onBannerClick}>Click me!</button>
);
}
}
And ParentComponent is
import React, { Component } from 'react';
import ChildComponent from './ChildComponent.jsx'
// App component - represents the whole app
export default class ParentComponent extends Component {
performMagic: function() {
alert('TAADAH!');
},
render() {
return (
<BannerAd onBannerClick={this.performMagic} />
);
}
}
but I got the error
Errors prevented startup:
While building for web.browser:
imports/ui/ParentComponent.jsx:5:16: Unexpected token (5:16)
Your application has errors. Waiting for file change.
I think the error is from
performMagic: function() {
alert('TAADAH!');
},
But I do know what the error is.
By the way, can anybody recommends me good debug tools for ReactJS?
Because you're using the ES6 syntax you'll have to bind the function to the instance using the following approach.
constructor(props) {
super(props)
this.performMagic = this.performMagic.bind(this)
}
This will allow you to use the this keyword in the onClick call
import React, { Component } from 'react';
import ChildComponent from './ChildComponent.jsx'
// App component - represents the whole app
export default class ParentComponent extends Component {
constructor(props) {
super(props)
this.performMagic = this.performMagic.bind(this)
}
performMagic() {
alert('TAADAH!');
}
render() {
return (
<BannerAd onBannerClick={this.performMagic} />
);
}
}
Need to write:
performMagic () {
alert('TAADAH!');
},
You need to use new sintax for functions, when write class which is new sintax.
EDIT: You can use "React Developer Tools" chrome extension and gaearon "redux-devtools" for development.
You need to use the new ES6 syntax when making your React Component a class. Use
performMagic() {
alert('TAADAH!');
}
make sure you don't put a comma after the function
I want to extend the react-bootstrap component and modify some of the prototype to achive my component.Here is my code:
import React from 'react';
import { Pagination } from 'react-bootstrap';
export default class myPagination extends Pagination {
constructor(props) {
super(props);
}
render() {
return <div>test</div>;
}
}
But here is a error:Cannot read property 'bind' of undefined
Maybe the Pagination component is created by React.createClass so I can't extends the component?
How can I solve the problem?