I'am newbie to react and just trying to learn about state and component but iam getting some errors plz can anyone help me out
my main app.js code is this
import React,{Component} from 'react';
import './App.css';
import Greet from './Comp'
class App extends Component {
render(){
return (
<div className='App'>
<Greet></Greet>
</div>
)
}
}
export default App;
and my comp.js code is this
import React,{Component} from 'react'
class Greet extends Component (){
constructor(props){
super(props)
this.state = {
message:'hello'
}
}
render(){
return (
<h1>hello {this.state.message}</h1>
)
}
}
export default Greet;
is their any problem with my webpack or my code?
Remove the () from this line class Greet extends Component (), So it would be like class Greet extends Component.
Related
I have a one react component which is nested inside a multi-level components and each of these components are getting a props from their parent components. As it was multi level nesting, I lost track of the parent component.
So, are there any ways to find, from which parent component we are getting the props to its child?
I tried with the below code. But it is not working.
this._reactInternalInstance._currentElement._owner._instance
Scenario:
First Component:
import React, { Component } from 'react'
import SecondLevelComponent from './SecondLevelComponent'
export class FirstLevelComponent extends Component {
constructor(props){
super(props)
}
render() {
return (
<div>
<SecondLevelComponent data="From Main Parent Component" />
</div>
)
}
}
export default FirstLevelComponent
Second Component:
import React, { Component } from 'react'
import ChildComponent from './ChildComponent'
export class SecondLevelComponent extends Component {
constructor(props){
super(props)
}
render() {
return (
<div>
<ChildComponent data2={this.props.data}/>
</div>
)
}
}
export default SecondLevelComponent
Child Component:
export class ChildComponent extends Component {
constructor(props){
super(props)
}
render() {
return (
<div>
<h1>FROM PARENT TO CHILD {this.props.data2}</h1>
</div>
)
}
}
export default ChildComponent
I am learning ReactNative, and now I'm looking into how to organize the files (for now I am going to create a folder for each page, each with an index, functions and styles file). For some reason, though, I am not being able to import information to index.js, can't use the styles or functions, when I open the page, it doesn't return the func method.
I am wondering whether I am using import wrong. Using import { MenuFunctions} from './Menu' has resulted in an error saying nothing was imported, this error no longer appears, but nothing is being returned still.
This is my code, index, Menu and styles are all in the same folder.
index.js
import React from 'react';
import MenuFunctions from './Menu';
import MenuStyles from './styles'
import { Text, View } from 'react-native';
export default class MenuPage extends React.Component {
render(){
return(
<View>
<Text> Text: {MenuFunctions.func} </Text>
</View>
);
}
}
Menu.js
import React from 'react';
export default class MenuFunctions extends React.Component{
constructor(props){
super(props);
}
func = () => {return "Hello, World!"};
}
styles.js
import React from 'react';
import { StyleSheet } from 'react-native';
export default class MenuStyles extends React.Component{
styles = StyleSheet.create({
text: {
color: "red",
}
});
}
Menu.js and styles.js shouldn't be React.Component and you forgot to call to Func method, () is missing.
React.Component is a UI component only which include a render method that returns JSX element.
Your code should look like that:
index.js
import React from 'react';
import MenuFunctions from './Menu';
import MenuStyles from './styles';
import {Text, View} from 'react-native';
export default class MenuPage extends React.Component {
render() {
return (
<View>
<Text> Text: {MenuFunctions.func()} </Text>
</View>
);
}
}
Menu.js
import React from 'react';
class MenuFunctions {
func = () => {
return 'Hello, World!';
};
}
export default new MenuFunctions();
styles.js
import {StyleSheet} from 'react-native';
export default styles = StyleSheet.create({
text: {
color: Colors.red30,
}
});
The problem is that you are trying to import Menu.js using import MenuFunctions from './Menu' when you had to specify the file itself:'./Menu/Menu.js'. (remember to call the function using parentheses class.function())
Also, whenever you export as default you don't have to use curly braces {}
If you are wondering about your project structure, you can use the following as a common structure to create projects. Let's say you have the following
- index.js
- src
- assets
- screens
- MenuScreen
- components
- services
- menu
- index.js //this is Menu.js
- android
- ios
NOTE
Do not extend React.Component if you are not exporting a component.
You need an object to perform the function of the class you created.
Then declare and use the constructor.
index.js
import React from 'react';
import MenuFunctions from './Menu';
import MenuStyles from './styles'
import { Text, View } from 'react-native';
export default class MenuPage extends React.Component {
constructor(props){
super(props);
this.menu = new MenuFunctions()
MemuStyle = new MenuStyles()
}
render(){
return(
<View>
<Text style={MemuStyle.styles.text}> Text: {this.menu.func()}</Text>
</View>
);
}
}
Menu.js
import React from 'react';
export default class MenuFunctions extends React.Component {
func(){
return 'Hello, World!';
}
}
styles.js
import { StyleSheet } from 'react-native';
export default class MenuStyles extends React.Component {
styles = StyleSheet.create({
text: {
color: "red",
}
});
}
NOTE: The features you intend to use do not necessarily have to inherit React.
I am following this guide to try and write a React Higher Order Component.
I am trying to have a reusable window component that will act as a container for other components, providing style and behaviour.
I am testing it with a Player component that for now just returns a ReactPlayer component from the npm package react-player
import React, { Component } from 'react';
function Window(WrappedComponent){
return class extends Component{
render(){
return (
<div className="window">
<WrappedComponent/>
</div>
);
}
}
}
export default Window();
This is the code for the player component
import React, { Component } from 'react';
import ReactPlayer from 'react-player';
import Window from './Window.js'
class Player extends Component {
render () {
return <ReactPlayer url='https://www.youtube.com/watch?v=iIKKvG0_KdM' playing />
}
}
const PlayerWindow = Window(Player);
export default PlayerWindow;
change export default Window(); to export default Window;
Remove the brackets from export default Window();
Alternatively, when calling the function you could write
> export const Window = function Window(WrappedComponent){
> return class extends Component{
> render(){
> return (
> <div className="window">
> <WrappedComponent/>
> </div>
> );
> }
> }
> }
Here is the code in ES5 in which the jsx is written into a separate file
import React from 'react';
import Template from './template.jsx';
const DetailElement = React.createClass({
render: Template
});
export default DetailElement;
enter code here
template.jsx file will be like this
import React from 'react';
const render = function() {
return (
<div>Hello World</div>
);
};
export default render;
How can I write the same using ES6 Classes ? Or any other solution is available to do this separation ?
I have got the ES6 code something like this
import React, {Component} from 'react';
import Template from './template.jsx';
export default DetailElement extends Component {
componentDidMount() {
// some code
}
};
DetailElement.prototype.render = Template;
Yes this is working.
Yes you can do it your template code is like a functional comoponent basically it is a function that returns jsx. You just need to render your template in your DetailElement class
import React from 'react';
import Template from './template.jsx';
class DetailElement extends React.Component{
render = Template
};
export default DetailElement;
here is an example I created codepen link
now is a es6 class feature that you can define class property outside class or babel transformer that you need to check
Use something like stateless function to define the JSX out of your component.
const HTML = (props) => <div> Hello {props.name}!</div>
class A extends React.Component{
render() {
return <HTML name="Joe"/>
}
}
ReactDOM.render(<A/>, document.getElementById('app'))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>
You have to import Component from 'react' and extend it to class.
import React, { Component } from 'react';
import Template from './template.jsx';
export class DetailElement extends Component{
render(){
return(
<Template></Template>
);
}
}
here is how the ES6 React looks like
import * as React from 'react'
class SomeComponent extends React.Component{
constructor(props){
super(props);
}
render(){
return (<div className="some class name">
Hello World
</div>
)
}
}
export default SomeComponent;
//import will look like
import SomeComponent from "./SomeComponent";
Detail Element will be something like this
import * as React from 'react'
import SomeComponent from "./SomeComponent";
class DetailElement extends React.Component{
constructor(props){
super(props);
}
render(){
return (<div className="some classes">
<SomeComponent/>
</div>
)
}
}
export default DetailElement;
Not Sure about es6 classes but you can write a function outside react component something like this
export const somefun = (parameter1)=> {
return (<div>{parameter1} </div> )
}
then call function in render method
render(){
return (<div className="some class name">
{somefun()}
</div>
)
}
Here is my super simple enhancer:
'use strict';
import React from 'react';
function BaseComponent(ComposedComponent) {
return class extends React.Component {
static displayName = "BaseComponent";
constructor(props) {
super(props);
}
updateState(obj) {
if (this.isMounted() && obj) {
this.setState(obj);
}
}
render() {
return (
<ComposedComponent {...this.props} {...this.states} />
)
}
}
}
export default BaseComponent;
And I'm enhancing my component as follows:
'use strict';
import React from 'react';
import BaseComponent from '../composits/Base.jsx';
#BaseComponent
class Home extends React.Component {
static displayeName = 'Home';
constructor(props) {
super(props);
}
render() {
console.log(this.updateState)
return (
<div>Hi</div>
)
}
}
export default Home
But this does not work! console.log(this.updateState) is null. What am I doing wrong?
EDIT
Maybe I'm missing something here. By the design I have above, will Home be the "enhanced" component, or BaseComponent? On otherwords, would Home have access to BaseComponent methods/states/props or the other way around?
Give it a name
function baseComponent(ComposedComponent) {
return class BaseComponent extends React.Component {
// ommited
}
}
export default baseComponent;
Or try to wrap it
'use strict';
import React from 'react';
import BaseComponent from '../composits/Base.jsx';
class Home extends React.Component {
// ommited
}
export default BaseComponent(Home);