I'am using reactjs and Redux to transfer data from a page to another page,
in the first page i'am dispatching an action to save the values,
this works good
In the second page, I have a component using this saved values
so the this.props.values give me exactely the values
but in this component i have to use in the render part the this.state.values
Is there a way to link this.props.values to my this.state.values in my second page ?
Is there a way to link this.props.values to my this.state.values in my second page ?
If that's all you want, the best way to put props into state is in the constructor
class Component extends React.Componet {
constructor(props) {
super(props)
this.state = { values: props.values || [] } // [] or some default value
}
}
just make sure you handle the case where the props value changes using componentWillReceiveProps
componentWillReceiveProps (nextProps) {
if (!equals(this.props.values, nextProps.values)) {
this.setState({ values: nextProps.values })
}
}
equals is whatever you want it to be (==, lodash#deepEquals, etc)
You can use class like this or if you are writing in function style, pass props as argument and simply call in return as {props.values}
import React, {Component} from 'react';
class testSample extends Component {
constructor(props) {
super(props)
console.log(props.value); //check whether you are receiving values in browser console
this.state = { values: props.values }
}
render(){
return(
<div>{this.state.values} </div>
)
}
}
export default testSample
or you can directly access them like this instead assigning to state again.
import React, {Component} from 'react';
class testSample extends Component {
constructor(props) {
super(props)
console.log(props.value); //check whether you are receiving values in browser console
}
render(){
return(
<div>{this.props.values} </div>
)
}
export default testSample
Related
I'm extending a parent component that is part of an SDK (AWS Amplify - SignIn), which I have no control over. I only need to make a small change where the input field data will be modified to be lowercase before it's passed to the authentication function.
import React from "react";
import { SignIn } from "aws-amplify-react";
export class CustomSignIn extends SignIn {
constructor(props) {
super(props);
this._validAuthStates = ["signIn", "signedOut", "signedUp"];
}
showComponent(theme) {
return (
<div>My child component that I don't need to render</div>
);
}
}
export default CustomSignIn;
This is more of a general question not specifically related to AWS Amplify, but I'd like to use the existing UI / rendering code from the parent — is there a way to simply display the parent's rendering content and not have any child content?
You can extend a component and use that components render function.
class ComponentFromThirdParty extends React.Component {
render() {
return <div>This is ComponentFromThirdParty</div>;
}
}
class MyComponent extends ComponentFromThirdParty {
componentDidMount() {
console.log(
"MyComponent was mounted and I render the same as ComponentFromThirdParty"
);
}
render() {
return super.render();
}
}
MyComponent will render this when mounted.
This is ComponentFromThirdParty
I am having two independent components in react and I want to call a method in first component that returns Some value to another component.
import React from 'react';
export default class A extend React{
constructor(props){
super(props);
}
getName = () =>{
var name = "MyName";
return name;
}
render(){
//Some code to render
}
}
Now In component B in want to call method getName() so that it returns name,which i want to use in component B.
import React from 'react';
export default class B extends React{
constructor(props){
super(props);
}
getName = () =>{
//Want to call the getName method of component A here
}
render(){
//Some code to render
}
}
Use React lifting State Up.
Here is the official documentation.
Lifting State Up
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.
Expected behaviour: The app should display John at first and then I change the state (name) to George (setTimeout) so that should be displayed.The state doesn't seem to change though.Any ideas?
import React, { Component } from 'react';
class App extends Component {
constructor(props){
super(props);
this.state={name:"John"};
}
render() {
setTimeout(() => {
this.setState=({name:"George"})
}, 2000)
return (
<div>
{this.state.name}
</div>
);
}
}
export default App;
In comments you got the way to make your code working. But I would like to add an answer here with the message that it is not good idea to change the state of your component in the render() function.
As when your state changes render() function will be called, which will call setTimeout, it will again change the state ... so you will go into infinite loop of rendering your component.
The right way of during this is to have you setTimeout in the componentDidMount() function of your component.
I have one app having component structure like below.
Component App Main parent which loads header in all components using {this.props.children}
Component Header
Component Home
Component Dashboard
Component Data
Component DataLoad
App contains Header in render passing some state variables.
Home contains Dashboard which has actions to update the state variables of App to update the Header.
Data contains DataLoad also from here i need to update the state variable of App to update the Header.
For example my App is like
import React from 'react';
import Header from './Header.jsx';
class App extends React.Component {
constructor(props) {
super();
this.state = {
show : '1',
}
this.showHide = this.showHide.bind(this);
}
showHideSearch() {
this.setState(prevState => ({
show: prevState.show == '1' ? '0' : '1',
}));
}
render() {
return (
<div>
<Header show={this.state.show}/>
{this.props.children}
</div>
)
}
}
export default App;
import React from 'react';
import Dashboard from './Dashboard.jsx'
class Home extends React.Component {
constructor(props) {
super();
this.showHide = this.showHide.bind(this);
}
showHide() {
tried this but not working
//this.props.showHideSearch();
}
render() {
return (
<div>// this props show not going to dashboard component
<Dashboard show={this.props.show} showHide= {this.showHide.bind(this)}/>
</div>
)
}
}
export default Home;
If I am understanding your question right, you are wanting to pass your this.showHideSearch function from your App component to its the component in this.props.children - your Home component.
This is easily accomplishable using:
React.cloneElement(this.props.children, {showHideSearch: this.showHideSearch});
Put that in place of where you have this.props.children.
Source - https://stackoverflow.com/a/35102287/6621973
Edit: To update a parent's state, simply pass down a function setting the state from parent to child. There are several examples if you Google "react change parent state", for example: How to update parent's state in React?