could you please suggest how to set initial value in react ?
here is my code
http://codepen.io/naveennsit/pen/mPYzdw
class App extends React.Component{
getInitialState(){
return {data: 'test'};
}
render(){
return <div>hello {this.state.data}</div>
}
}
React.render(<App/>,document.getElementById('app'))
See this post from the React blog.
You set it in the constructor.
import {Component} from 'react';
class App extends Component {
constructor(props) {
super(props);
this.state = {data: 'test'};
}
render() { ... }
}
Also, I notice you're using React.render which is no longer a thing.
import {render} from 'react-dom'
// ...
render(<App/>, document.getElementyById('app'));
Related
I'm new to React so this may be simple to fix, but I cannot access {this.props.AvgRating} in the ReviewsTotalStars.js file. I'm having to use the following state code to access a variable called ratingStars:
this.state = {
ratingStars: 3.5
};
But I don't want to use the above ratingStars, and would instead prefer to use the props.AvgRating. Why cannot I access it? Here is my simple code:
index.js:
import React, { Component } from "react";
import { render } from "react-dom";
import ReviewsLeftArea from "./ReviewsLeftArea";
import "./style.css";
const avgRating = 3.5;
class App extends Component {
constructor() {
super();
this.state = {
name: "React"
};
}
render() {
return (
<div>
<ReviewsLeftArea AvgRating={avgRating} />
</div>
);
}
}
render(<App />, document.getElementById("root"));
ReviewsLeftArea.js:
import React from "react";
import ReviewsTotalStars from "./ReviewsTotalStars";
export default class ReviewsLeftArea extends React.Component {
render() {
return (
<div>
<ReviewsTotalStars avgRating={this.props.AvgRating} />
</div>
);
}
}
ReviewsTotalStars.js:
import React from "react";
export default class ReviewsTotalStars extends React.Component {
constructor() {
super();
this.state = {
ratingStars: 3.5
};
}
render() {
return (
<div>
{this.state.ratingStars} works but this {this.props.AvgRating} doesn't
</div>
);
}
}
Thanks for any help and explanations here.
In ReviewsTotalStars you want to access:
this.props.AvgRating
But it is actually:
this.props.avgRating
By the way, you should not have a props that starts with an upper case letter
Should be simple to fix, in react, you should never create vaiables outside of the class you are working on, instead you should add them to the state object, like this:
Index.js:
import React, { Component } from "react";
import { render } from "react-dom";
import ReviewsLeftArea from "./ReviewsLeftArea";
import "./style.css";
// const avgRating = 3.5;
class App extends Component {
constructor() {
super();
this.state = {
name: "React",
avgRating: 3.5;
};
}
render() {
return (
<div>
<ReviewsLeftArea AvgRating={this.state.avgRating} />
</div>
);
}
}
render(<App />, document.getElementById("root"));
ReviewsTotalStars.js:
import React from "react";
export default class ReviewsTotalStars extends React.Component {
constructor() {
super();
this.state = {};
}
render() {
return (
<div>
{this.props.avgRating} //now this should work
</div>
);
}
}
I have two components. The first has state initialized:
import React from 'react';
class One extends React.Component {
constructor(props) {
super(props);
this.state = {
data: 'hi'
}
}
render() {
return (
<div prop={this.state.data}>{this.state.data}</div>
);
}
}
export default One;
import React from 'react';
class Two extends React.Component {
render() {
return (
<div>{this.prop}</div>
);
}
}
export default Two;
The first component prints out the state of data. How would I pass that value into my second component as a read only value and render it?
To pass the value in the second component, you have to first import it in your first component and pass the value as prop.
For example, your code might look like this:
import React from 'react';
import Two from './Two' // I am assuming One.js and Two.js are in same folder.
class One extends React.Component {
constructor(props) {
super(props);
this.state = {
data: 'hi'
}
}
render() {
return (
<div>
<div>{this.state.data}</div>
<Two value={this.state.data} />
</div>
);
}
}
export default One;
And then in the Two.js you can access the value as below:
import React from 'react';
class Two extends React.Component {
render() {
return (
<div>{this.props.value}</div>
);
}
}
export default Two;
Now, let's say, you are using your component One in App or anywhere. Whenever you will use <One/> you will get following in the browser:
hi
hi
You must call this 'Two' component into 'One' like this
One Component:
render() {
return (
<Two myProp={this.state.data} />
)
}
You can call this whatever u wish (myProp)
And read this in 'Two' component:
render() {
return (
<div>Received data from parent Component: {this.props.myProp}</div>
)
}
Before you call 'Two' component into 'One' you must import that file
import Two from './path/to/component';
Just add the following code in One component render method and pass the data as props which is read-only
import React from 'react';
import Two from '/components/Two'
class One extends React.Component {
constructor(props) {
super(props);
this.state = {
data: 'hi'
}
}
render() {
return (
<div prop={this.state.data}>{this.state.data}</div>
<Two data={this.state.data} />
);
}
}
export default One;
Then In component Two to access data add following code
import React from 'react';
class Two extends React.Component {
constructor(props){
super(props)
}
render() {
return (
<div>{this.props.data}</div>
);
}
}
export default Two;
Props will hold the object transferred from parent element
One.js
import React from 'react';
import Two from './two'
class One extends React.Component {
constructor(props) {
super(props);
this.state = {
data: 'hi'
}
}
render() {
return (
<div>{this.state.data}
<Two dto={this.state} /></div>
);
}
}
export default One;
Two.Js
import React from 'react';
class Two extends React.Component {
render() {
return (
<div>Component Two data: {this.props.dto.data}</div>
);
}
}
export default Two;
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'm trying to get AJAX-retrieved data into a parent React component so it can be fed down to a child component. I'm using the popular pattern for this defined here where a comment list is used as the example:
components/CommentList.js
import React from 'React';
export class CommentList extends React.Component {
constructor(props) {
super(props);
}
render() {
return <ul> {this.props.comments.map(renderComment)} </ul>;
}
renderComment({body, author}) {
return <li>{body}—{author}</li>;
}
}
components/CommentListContainer.js
import React from 'React';
import { CommentList } from './CommentList';
export class CommentListContainer extends React.Component {
constructor() {
super();
this.state = { comments: [] }
}
componentDidMount() {
$.ajax({
url: "http://get/some/api",
dataType: 'json',
success: function(comments) {
this.setState({comments: comments});
}.bind(this)
});
}
render() {
return <CommentList comments={this.state.comments} />;
}
}
index.js: the entry point for webpack
import React from 'react'
import { render } from 'react-dom'
import { CommentListContainer } from './components/CommentListContainer';
window.React = React;
render(
<CommentListContainer />,
document.getElementById('nav__react-target')
)
When doing all this, I get the following error:
Uncaught ReferenceError: renderComment is not defined
I've move the methods around as well as tweaked the importing of dependencies in various spots with no luck. Any ideas?
Thanks in advance.
You don't have unguarded references to sibling methods with ES2015 classes (as you do in Java / C#, etc.) - instead you need to explicitly reference this to get at the methods of the class:
render() {
// I changed map(renderComment) to map(this.renderComment)
return <ul>{this.props.comments.map(this.renderComment)}</ul>;
}
I'm trying to use ES6 classes inside of React, and want all my components to inherit certain methods, however as soon as I try to extend a component which extends the React.Component class, the componentDidMount method doesn't trigger and hence nothing gets rendered. The code I'm using:
BaseComponent.jsx
import React from 'react';
class BaseComponent extends React.Component {
constructor() {
super();
console.log('BaseComponent constructor');
}
render() {
return (
<div>Hello, Im the base component</div>
);
}
}
export default BaseComponent;
ExampleComponent.jsx
import BaseComponent from './BaseComponent';
class ExampleComponent extends BaseComponent {
constructor(props) {
super(props);
}
componentDidMount() {
console.log('exampleComponent mounted');
}
render() {
return (
<div>Hello, Im the example component</div>
);
}
}
export default ExampleComponent;
App.jsx
import React from 'react';
React.render(<ExampleComponent />, document.body);
I'm using React 0.13.3, and using babelify 6.1.2 to transpile.
The string 'exampleComponent mounted' never gets logged to console, and nothing is rendered. Any ideas what I'm doing wrong?
I'm not sure about the approach, but this code also works:
export default class Service extends BaseComponent {
componentDidMount(...args) {
super.componentDidMount.apply(this, args);
}
}
UPD: this is considered to be a bad practice though:
a) https://medium.com/#dan_abramov/how-to-use-classes-and-sleep-at-night-9af8de78ccb4
b) https://medium.com/#dan_abramov/mixins-are-dead-long-live-higher-order-components-94a0d2f9e750
I think, the problem is that you cannot create deeper class-structures for react components. Also, you shouldn't have to need it. On your example the BaseComponent is useless anyway.
Try this instead:
import React from 'react';
export default class ExampleComponent extends React.Component {
constructor(props) {
super(props);
}
componentDidMount() {
console.log('exampleComponent mounted');
}
render() {
return (
<div>Hello, Im the example component</div>
);
}
}
If you want to create 'BaseComponents', you could implement them as mixins or simply as 'sub components'.
This could look like this:
import React from 'react';
import BaseComponent from './BaseComponent';
export default class ExampleComponent extends React.Component {
constructor(props) {
super(props);
}
componentDidMount() {
console.log('exampleComponent mounted');
}
render() {
return (
<div>
<div>Hello, Im the example component</div>
<BaseComponent />
</div>
);
}
}
EDIT: Also possible:
import React from 'react';
import BaseComponent from './BaseComponent';
export default class ExampleComponent extends React.Component {
constructor(props) {
super(props);
}
componentDidMount() {
console.log('exampleComponent mounted');
}
render() {
return (
<BaseComponent
<div>Hello, Im the example component</div>
</BaseComponent>
);
}
}
// BaseComponent.js
render() {
return {
<div>
<div>Hello, Im the base component</div>
{this.props.children}
</div>
}
}
EDIT #2: Above code works fine with es5/jsx syntax.
DEMO