I have asynchronous method get called and I need the value from it to be render on the first cycle so it will be passed to the next component that being render and I cant make id done. The component is rendered before the value is returned which cause the the prop be undefined when it passed.
Any idea how can I delay the rendering till the value get returned?
CODE SAMPLE:
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
valueHere:''
}
}
componentWillMount() {
axios.post(url, {
username:this.state.username
})
.then((res) => {
this.setState({
valueHere:res.data
})
})
}
render() {
return(
<AnotherComponent
someValue={this.state.valueHere}
/>
)
}
}
export default class AnotherComponent extends Component {
constructor(props) {
super(props);
}
render() {
console.log(this.props.someValue) // undefined
return(
<View/>
)
}
}
You can use conditional rendering.
So basically, you check if that value exists then render the component else return null/any other component;
render() {
return( this.props.someValue? <ActualComponeent /> : <div> some loader...</div>)
}
Related
I saw thousands post about it so I am a bit confuse, I did use arrow function, I binded my method changed for componentDidUpdate but I still can't manage to
in my async call setState my data and pass it to my child component.
ParentComponent
class ParentComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
activeNav: 1,
loading: true,
data: []
};
this.fetchData = this.fetchData.bind(this);
}
fetchData = () => {
var that = this;
getMyData()
.then(res => {
console.log(res); // Output res Object
that.setState({
data: res
})
})
.catch((error) => {
console.log(error);
});
}
componentDidUpdate = () => this.fetchData()
render() {
const { data, loading } = this.state;
return (
<>
<ChildComponent data={this.data} loading={loading}/>
</>
);
}
}
ChildComponent
class CurrentUp extends React.Component {
constructor(props) {
super(props);
}
componentDidUpdate = () => {
console.log(this.props.data); // Output []
console.log(this.props.loading); // Output true
}
}
render() {
console.log(this.props.data); // Output []
console.log(this.props.loading); // Output true
return (
<div>
</div>
);
}
}
What am I missing ?
Solved, i am not sure how. I kept trying different stuff
You are console logging the data in the componentDidMount method. This method runs only once when a component is mounted. When you update the data in the parent component, and pass it to the child component, it doesn't re-create the entire component instance. Only the updates are passed down. You can access those updates in componentDidUpdate method. Or, if you are directly accessing props, you can log the data inside the render method.
class CurrentUp extends React.Component {
constructor(props) {
super(props);
}
render = () => {
console.log(this.props.data);
console.log(this.props.loading);
return null;
}
}
Other points:
You don't need to bind the function with this if you are using an arrow function.
Inside the arrow function, it is safe to use the this keyword. No need of assigning it to that.
Try to bring some more code cause I see the child component you posted is an instead current up component. Send the real child component and then move the var in your fetchData function to the constructor.
Need help passing state as a prop to another state component. I'm very new to React and I'm not sure what I'm doing wrong. When I console.log inside the Timer component it displays undefined but when I console.log in the Main component it displays the object perfectly.
class Main extends React.Component {
constructor() {
super()
this.state = {
isLoaded: false,
itemsP:{}
}
}
componentDidMount() {
fetch("https://api.spacexdata.com/v3/launches/next")
.then(response => response.json())
.then(
(resData) =>
this.setState({
isLoaded: true,
itemsP: resData
})
)
}
render() {
console.log(this.state.itemsP) //this will console.log the object from the api
return (
<main>
<Timer nextLaunch={this.state.itemsP} />
</main>
)
}
}
//Timer component
class Timer extends React.Component{
constructor(props) {
super(props)
this.state = {
nextDate: props.nextLaunch.launch_date_utc
}
}
render() {
console.log(this.state.nextDate) //will console log UNDEFINED why is this?
return (
<div>
//display something....
</div>
)
}
}
here is the link for the API that I'm using for reference.
#tlrmacl might have answered it there. It's missing the this keyword. In theory, you might be assigning the initial value still to the state.
It is due to how react lifecycle works
On your componentDidMount(), you are calling setState after the jsx gets mounted to the DOM. this.state.itemsP is given an initial value of {} then after the mount, it will receive its new value from comopnentDidMount()
Inside your Timer component, you are assigning the first value of this.props.nextLaunch to a new state. It doesn't have the chance to update the value. Instead of doing this:
this.state = {
nextDate: props.nextLaunch.launch_date_utc
}
use props.nextLaunch.launch_date_utc directly:
console.log(props.nextLaunch.launch_date_utc)
For more information check out this tweet by Dan Abramov here
From ur parent component u pass value as nextLaunch
Dont forget to call props in ur parent component constructor
constructor(props) {
super(props);
this.state = {
isLoaded: false,
itemsP: 'myValue'
}
}
<Timer nextLaunch={this.state.itemsP} />
So in your Timer Component to print ur value you have to call ur props this way this.props.nextLaunch
class Timer extends React.Component {
render() {
return <p>My nextLaunch data are {this.props.nextLaunch}.</p>;
}
}
Hope it helps
//Timer component
class Timer extends React.Component{
constructor(props) {
super(props)
this.state = {
nextDate: this.props.nextLaunch.launch_date_utc
}
}
You need this.props instead of props in your constructor
I have an App component and a function 'modalToggled' inside its.
I want to pass the function to multiple child components until I get to the last one, the 'interiores' component.
Like this:
<App> -> <Coluna1> -> <MenuPrincipal> -> <Portfolio> -> <PortfolioMenu> -> <interiores>
App Component, the parent of all components:
import React, { Component } from 'react';
import Coluna1 from './Coluna1'
class App extends Component {
constructor(props) {
super(props)
this.state = {
modalOn: false
}
this.modalToggled = this.modalToggled.bind(this)
}
modalToggled = (on) => {
this.setState({modalOn: on});
}
render() {
return (
<div>
<Coluna1 onModalToggle={this.modalToggled}/>
</div>
)
}
}
export default App;
This is the 'Coluna1' the first child component. I did the same thing in the another ones: 'MenuPrincipal', 'Portfolio', 'PortfolioMenu'
class Coluna1 extends Component {
constructor(props){
super(props)
}
render() {
return (
<div>
<Header />
<MenuPrincipal onModalToggle={this.props.modalToggled} />
</div>
)
}
}
export default Coluna1
Therefore here is the last component interiores, when I click on the button there appears an error message:
TypeError: _this.props.onModalToggle is not a function
import React, { Component } from 'react'
import Modal from 'react-responsive-modal';
class Interiores extends Component {
constructor(props) {
super(props)
this.state = {
open: false
}
}
onOpenModal = () => {
this.setState({ open: true });
this.props.onModalToggle(true);
};
onCloseModal = () => {
this.setState({ open: false });
this.props.onModalToggle(false);
};
render() {
const { open } = this.state;
return (
<div>
<button onClick={this.onOpenModal}>Open modal</button>
<Modal open={open} onClose={this.onCloseModal} center></Modal>
</div>
)
}
}
export default Interiores;
Does anybody know how to solve it? Thank you
It happens, because in App class you pass prop with name onModalToggle:
<Coluna1 onModalToggle={this.modalToggled}/>
But in Coluna1 you receive this props with wrong name, modalToggled:
<MenuPrincipal onModalToggle={this.props.modalToggled} />
Just make the names of props equal. In Coluna1 and other intermediate components pass and receive this props as onModalToggle:
<MenuPrincipal onModalToggle={this.props.onModalToggle} />
This is the problem
modalToggled = (on) => {
this.setState({modalOn: on});
}
Since this is a class function it needs to be defined like
modalToggled(on) {
this.setState({modalOn: on});
}
I'm new to react.js.
I'd like to get default value of state following_status by receiving props.user.following_status.
I'm passing user object ( user = { following_status: 'following', id:123 } ) to ReactionButton component. ReactionButton component is looks like this:
class RelationButton extends React.Component {
constructor(props){
super(props);
console.log(props.user.following_status) # undefined!!!
this.state = {
following_status: props.user.following_status
}
...
render() {
if (this.state.following_status == 'following') {
<UnFollowBtn/>
} else {
<FollowBtn/>
}
}
RelationButton was called by UserCardHeader component.
const UserCardHeader = (props) => {
const user = props.user;
return(
<header className="user-card--full__header">
<RelationButton user={user}></RelationButton>
</header>
)
}
I don't understand why console.log(props.user.following_status) returns undefined. I googled many websites like those:
React component initialize state from props
accessing props inside react constructor
those answers suggest
class FirstComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
x: props.initialX
};
}
}
but this didn't work for me.
If I add componentWillReceiveProps to the codes above,
componentWillReceiveProps(props){
console.log(props.user.following_status) #=> "following"
this.setState({following_status: props.user.following_status})
}
everything works well. However I think it's weird solution and sometimes doesn't work. Why can't I receive object props in constructor(props) {} section?
Without the full code, we can't tell what's wrong but it is obvious that following_status comes asynchronously to the component and that's why is not accessible right away in the constructor.
To somehow fix it you can detect if props have changed and reset state accordingly in componentDidUpdate.
class RelationButton extends React.Component {
constructor(props){
super(props);
console.log(props.user.following_status) # undefined!!!
this.state = {
following_status: props.user.following_status
}
}
componentDidUpdate(prevProps) {
if(prevProps.user.following_status !== this.props.user.following_status) {
this.setState({ following_status: this.props.user.following_status })
}
}
render() {
// you forgot about return statements :
if (this.state.following_status == 'following') {
return <UnFollowBtn/>
} else {
return <FollowBtn/>
}
}
}
Well here I want to use one method to another component, And for that I found a way through composition.
And this is what I did for that
file1.js
import ProductList from '../../views/Products/ProductList';
class CloseableTab extends Component {
constructor() {
super();
this.tpItem = () => {
console.log("hello, item clicked");
};
}
render() {
return (
<div>
<ProductList
itemChange={this.tpItem} />
</div>
);
}
}
export default CloseableTab;
Then in productList I want to call the "tpItem" method by calling itemChange in prop.
Though before that I tried to console the 'prop' of product list. So, it shows me null object in the console. And for that I used the code below:
ProductList.js
export default class ProductList extends Component {
constructor() {
super();
};
render() {
console.log(this.props);
return { }
}
}
So, this gives me null object in the console.
I'll appreciate your help, thanks.
Did you make constructor props enabled ?
Just pass props parameter in constructor
constructor(props) {
super(props)
}
The constructor for a React component is called before it is mounted.
When implementing the constructor for a React.Component subclass, you
should call super(props) before any other statement. Otherwise,
this.props will be undefined in the constructor, which can lead to
bugs.
Its not ideal to define functions in the constructor of the component, you can declare them outside of constructor and pass them down, also, in ProductList you are trying to render an object which isn't supported. if you don't want to return anything use return null.
Below code works as expected.
class CloseableTab extends Component {
constructor() {
super();
this.tpItem = () => {
console.log("hello, item clicked");
};
}
render() {
console.log(this.tpItem);
return (
<div>
<ProductList
itemChange={this.tpItem} />
</div>
);
}
}
class ProductList extends Component {
render() {
console.log(this.props);
return null
}
}
However you must write it like
class CloseableTab extends Component {
tpItem = () => {
console.log("hello, item clicked");
};
render() {
console.log(this.tpItem);
return (
<div>
<ProductList
itemChange={this.tpItem} />
</div>
);
}
}
Working sandbox