How to access value from parent method in child class in reactjs

How to access value from parent method in child class in reactjs
0

#1

I have a parent container where getMonthDay() is a method.

    getDayMonth() {
  return {
    currentMonth: new Date().getMonth(),
    currentDate: new Date().getDate()
  }
}

I want to use the currentdate and current month value in child component.

The parent render method is as follow:

render() {

    return (
        <childClass
          currentMonth={this.Date().getMonth}
          currentDate={this.Date().getDate}
        />
    )
}

I am not able to use props to access the date and month in child component render method.

Child class

render() {
        return (
            
                <div className="childclass">
                    {(this.props.currentMonth === 11 && this.props.currentDate >= 14 && this.props.currentDate < 28) ?
                        <img className="santa" src="../../img/spinny-santa.gif" /> : <div className="progress-circle progress-indeterminate" />}
                   
                </div>
           
        ) 

can someone please help.


#2

I’ve edited your post for readability. When you enter a code block into the forum, remember to precede it with a line of three backticks and follow it with a line of three backticks to make easier to read. See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.


#3

You’ve written the function getDayMonth, but you’re not using it. When you render your childClass component, you’re using code that hasn’t been defined:

<childClass
          currentMonth={this.Date().getMonth} // undefined
          currentDate={this.Date().getDate} // undefined
        />

Based on what you’ve written here, it should be something like this

<childClass
          currentMonth={this.getDayMonth().currentMonth}
          currentDate={this.getDayMonth().currentDate}
        />

#4

In that case if I use this.props.getDayMonth().currentMonth - it gives me same undefined as values


#5

You should be using this.props.currentMonth. You’ve already called the function and it’s returned a value, so trying to call it again results in undefined.


#6

Tried this as well… No luck so far :’(


#7

Well, I can’t see all of your code, so I don’t know where the problem is. You should simplify things to make debugging easier, though. First, get rid of the function getDayMonth. Placing the current date in your component’s state makes more sense. I’ll assume you’re using ES6 classes because that’s what everyone’s doing these days.

class Parent extends Component {
    constructor() {
        super()
        this.state = {
            currentMonth: new Date().getMonth(),
            currentDate: new Date().getDate()
        }
     }

    render() {

        return (
            <childClass
              currentMonth={this.state.currentMonth}
              currentDate={this.state.currentDate}
            />
        )
    }
}

Then your childClass component should work as you’ve written it. If this doesn’t work, then you’ve got bigger problems than passing values.


#8

Hi,
I tried to add the values in State and when I tried printing the currentDate in console from the child component, I am getting error as currentDate not defined… :frowning:

class ParentContainer extends Component {
    constructor(props) {
        super(props);
        this.state = {
            currentMonth: new Date().getMonth(),
            currentDate: new Date().getDate()

        }

    }


    /*getMonthDay(){
        return { currentMonth: new Date().getMonth() , currentDate: new Date().getDate}
    }*/


    render() {
                return (
            <Child
                currentMonth={this.state.currentMonth}
                currentDate={this.state.currentDate}
                 />
        )
    }
}


export default ParentContainer;

class Child extends Component {

    
    
    render() {
        console.log(this.props.currentDate)
        
        return (
            
                <div className="CssClass">
                    {(this.props.currentMonth === 12 && this.props.currentDate >= 14 && this.props.currentDate < 28) ?
                        <img className="santa" src="../../img/spinny-santa.gif" /> : <div className="progress-circle progress-indeterminate" />}
                  
                </div>
            
        )
        }
}



export default Child;

I really really appreciate your help. Kindly help me sorting this out as I have been struggling since last 2 days!!


#9

I made a quick demo mostly using your code (slight changes) and there are no undefined values.


#10

Here is some sample code I wrote once on passing data around in React.


#11

This might be relevant too - looks like your “childClass” component starts with a lower case letter.


#12

Thank you so very much for all your help… really appreciate it…
The issue has got resolved :slight_smile:


#13

It could help someone else in the future if you described your solution here.