In my code, I console.log(this.props) inside componentDidMount while I got undefined. I console.log(this.props) inside render() I got four outputs, for the first two all the properties are undefined, the last two are correct.
componentDidMount = () => {
const { ratingsAverage } = this.props;
console.log(ratingsAverage);
//this.setState({value: this.props.ratingsAverage})
}
render() {
console.log(this.props);
}
the output of console.log(ratingsAverage) inside componentDidMount() is undefined.
the output of console.log(this.props) inside render() is on the pic below
Try this . your component constructor should be like this
constructor(props){
super(props);
this.state = {
//states
};
}
Related
I'm trying to build a little weather widget, where the geolocation of the user is captured in one component and then passed onto a child component which fetches the weather data (based on the location) and then eventually renders an icon indicating the current weather conditions.
I'm passing the longitude and latitude state as props to my WeatherWidget. Unfortunately, the WeatherWidget also receives the initial state null. How I can I avoid that?
Thank you for your help!
class GetGeolocation extends Component{
constructor(){
super();
this.state = {
lngt: null,
latd: null
}
}
componentDidMount(){
this.getLocation()
}
getLocation = () => {
if(navigator.geolocation){
navigator.geolocation.getCurrentPosition(position => {
this.setState({lngt: position.coords.longitude.toFixed(4)});
this.setState({latd:position.coords.latitude.toFixed(4)});
}
);
};
}
render(){
return (
<>
<WeatherWidget lngt = {this.state.lngt} latd = {this.state.latd} />
</>
)
}
class WeatherWidget extends Component{
constructor(props){
super(props);
this.state = {
weather:[]
}
}
componentWillReceiveProps(nextProps){
this.getWeather(nextProps)
}
getWeather = (location) => {
console.log(location)
// The console logs twice:
// First:
//{lngt: "-12.3456", latd: null}
//Then, the correct values:
//{lngt: "-12.3456", latd: "78,9999"}
}
Don't use componentWillReceiveProps, that will be deprecated in later versions of React.
But also, you can just setup conditional logic in your life-cycle methods to determine what code to execute.
componentWillReceiveProps(nextProps){
//condition says if both value are truthy then run code.
if(nextProps.lngt && nextProps.latd){
this.getWeather(nextProps)
}
}
You can also use componentDidUpdate()
componentDidUpdate(){
//condition says if both value are truthy then run code.
if(this.props.lngt && this.props.latd){
this.getWeather(this.props)
}
}
One option is to conditionally render in the parent component:
class GetGeolocation extends React.Component {
constructor(props) {
super(props);
this.state = {
lngt: null,
latd: null
};
}
componentDidMount() {
this.getLocation();
}
getLocation = () => {
// Simulate the network request
setTimeout(() => this.setState({ lngt: 100 }), 1000);
setTimeout(() => this.setState({ latd: 100 }), 1000);
};
render() {
const { lngt, latd } = this.state;
if (!lngt || !latd) return null;
return <WeatherWidget lngt={lngt} latd={latd} />;
}
}
class WeatherWidget extends React.Component {
constructor(props) {
super(props);
this.state = {
weather: []
};
}
componentDidMount() {
this.getWeather(this.props);
}
getWeather = location => {
console.log(location);
};
render() {
return null;
}
}
Please note, that I a fetching data from AWS DynamoDB.
...
class Test extends Component {
constructor(props) {
super(props);
this.state = {
contactList: []
}
}
componentDidMount() {
var getItemsPromise = db.scan({ TableName: "tester" }).promise();
getItemsPromise.then((data) => this.setState({ contactList: data.Items }));
}
render() {
return (
<div>{this.state.contactList[0].link.S}</div>
);
}
}
export default Test;
I am trying to render the returned value, but can't. If I set
render() {
console.log(this.state.contactList[0].link.S);
return (
<div>test</div>
);
}
it works. Why is that? Why is it not working when I set it straight inline?
this.state.contactList[0] is undefined before the promise is resolved, so this.state.contactList[0].link will give rise to an error.
You could e.g. return null from the render method until the array has been filled with your objects:
class Test extends Component {
// ...
render() {
if (this.state.contactList.length === 0) {
return null;
}
return <div>{this.state.contactList[0].link.S}</div>;
}
}
I am new with reactjs.
This is what I am trying
class EventDemo extends Component {
constructor(){
super()
this.getStarWars()
this.state = {}
}
getStarWars = ()=> axios.get('https://swapi.co/api/people')
.then(res => {
console.log(res.data)
this.setState({
names: res.data.results
})
})
render() {
console.log(this.state.names);
return (
<div>
{this.state.names.map(function(e){
return <li>{e.name}</li>
})}
</div>
);
}
}
But This following error i am getting
What I am doing wrong here ? It supposed to work .
First of all,you shouldn't call your this.getStarWars() function inside the constructor, it is a very bad practice and could cause you troubles, http calls in React component should be generally called from the componentDidMount function.
However the issue in this case is another one,you haven't given an initial value to this.state.names, so when the component tries to do the initial render it fails because the names are undefined since the initial render appens before the http call is resolved
You code should be fixed like this:
class EventDemo extends Component {
constructor(){
super()
this.state = { names:[] }
}
componentDidMount(){
this.getStarWars()
}
getStarWars = ()=> axios.get('https://swapi.co/api/people')
.then(res => {
console.log(res.data)
this.setState({
names: res.data.results
})
})
render() {
console.log(this.state.names);
return (
<div>
{this.state.names.map(function(e){
return <li>{e.name}</li>
})}
</div>
);
}
}
This is my React component:
constructor(props) {
super(props);
this.state = {
};
this.showChart = this.showChart.bind(this)
}
showChart() {
console.log('test')
}
render() {
{this.showChart} //throws error that, this is undefined
return () (
{this.showChart} //prints test
)
}
Now, if I want to call the function from render() but outside return() what should I do?
Your Component syntax is incorrect at a few places. this is available inside render.
constructor(props) {
super(props);
this.state = {
};
this.showChart = this.showChart.bind(this)
}
showChart() {
console.log('test')
}
render() {
this.showChart()
return (
<div>{this.showChart()}</div>
)
}
EDIT:
You can also work with arrow functions to bind said functions to your component. By doing this, you don't have to bind every function. It looks a lot cleaner:
constructor(props) {
super(props);
this.state = {
};
}
showChart = () => {
console.log('test')
}
render() {
this.showChart()
return (
<div>{this.showChart()}</div>
)
}
replace {this.showChart} with this.showChart()inside the render function. So your new code should be
render(){
this.showChart();
return(
{this.showChart}
);
}
I have a problem where in I'm going to access a state inside a method inside my parent component from my child component it returns me an undefined value which i'm sure in the first place have a value of objects in an array.
Parent Component:
class BoardList extends React.Component {
constructor(props){
super(props);
this.state = {
lists: []
};
}
componentWillMount(){
this.props.getBoardLists()
.then((result) => {
this.setState({
lists: result
});
})
.catch(error => {
console.log(error);
});
}
addBoardLists(result){
// This is i'm getting my undefine state lists :(
console.log(this.state.lists);
this.setState({
lists: this.state.lists.concat([result])
});
}
render() {
const { isLoading,data } = this.props;
if(isLoading){
return (
<Loading />
);
}
return (
<div className={style.boardListContainer}>
<h1 className={style.boardListTitle}>Personal Board</h1>
<Row>
<BoardItem item={this.state.lists} />
<BoardAdd onDisplay={this.fetchBoardLists} onAddItem={this.addBoardLists} />
</Row>
</div>
)
}
}
Child Component:
class BoardAdd extends React.Component {
constructor(props){
super(props);
this.state = {
name: '',
boardAddModalShow: false
}
}
openAddBoardModal(){
this.setState({ boardAddModalShow: true });
}
closeAddBoardModal(){
this.setState({ boardAddModalShow: false });
this.props.dispatch(reset('BoardAddModalForm'));
}
addBoard(formProps) {
this.props.addBoard(formProps).then((result) => {
// This is where I access my addOnItem from my parent component
this.props.onAddItem(result);
this.props.dispatch(reset('BoardAddModalForm'));
this.closeAddBoardModal();
})
.catch(error => {
console.log("error");
console.log(error);
});
}
}
Perhaps this will help?
class BoardList extends React.Component {
constructor(props){
super(props);
this.state = {
lists: []
};
this.addBoardList.bind(this)
}
What is this magical .bind? You should read up on what this means in JavaScript (which it almost never thinks what you think it means). By default, ES6 constructors do not bind (for some crazy reason in my opinion), their own methods to their own this value. Thus, the this in your method is referring to a completely different this you are thinking of and consequentially, making this scenario quite bizarre.
https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/this