React trying to assign props to state variable doesn't work

Question

I'm trying to assign props that I get from parent component and assign it to state in child component(because I want to manipulate the props data I assign it to state first).

When I log the state variable it comes out as an empty array but when I make a new variable in render and assign props to it and log it. It does show the data I need. Also, when I just log this.props I can definitely see that props holds the data I need.

I've assigned props to state a couple of times before, so I'm not sure what is so different this time for it not to work.

Parent component where I pass props to child:

  <ShowAvailableTimeslots onClick={this.getSelectedTimeslot} allTimeSlots={this.state.AvailabletimeSlots} /> 

Child component where I try to assign props to state:

class ShowAvailableTimeslots extends Component {
    constructor(props) {
      super(props)
        this.state = {
            sliceEnd: 5,
            sliceStart:0,
            selectedSlotValue: "",
            timeSlotArr: this.props.allTimeSlots,
            // timeSlotSlice: timeSlotArr.slice(this.state.sliceStart, this.state.sliceEnd)
        }
      
    }

    handleTimeSlotClick = (timeSlot) => {
        this.setState({ selectedSlotValue: timeSlot }, () => {
            this.props.onClick(this.state.selectedSlotValue)
            console.log('time slot value', timeSlot)
          
        });
    }
    previousSlots =()=>{
        var test;
    }
    forwordSlots =()=>{
        var test;
    }    

    
    render() {
         var timeSlotArrRender = this.props.allTimeSlots; 
        return (
            <React.Fragment>

                {console.log("state", this.state.timeSlotArr)} // --> doesn't show data
                {console.log("props", this.props)} // --> does show data
                {console.log("render variable", timeSlotArrRender )} // --> does show data


                <button className="button btn" onClick={() => this.previousSlots()} disabled={this.state.sliceStart === 0}>left</button>
                {/* {this.state.timeSlotArr.map(timeSlot => <a className="timeslot btn " key={timeSlot} value={timeSlot} onClick={() => this.handleTimeSlotClick(timeSlot)}>{timeSlot}</a>)
                } */}
                <button className="button btn">right</button>

            </React.Fragment>
        )
    }
}

export default ShowAvailableTimeslots

Answer 1

the constructor is called when the component life cycle begins. You are passing the this.state.AvailabletimeSlots from the parent and by then the constructor have already been called and the assignment for timeSlotArr is already done, so

timeSlotArr: this.props.allTimeSlots // will not work

You have to get help of life cycle methods or hooks

componentWillReceiveProps(nextProps){
   this.setState({timeSlotArr: nextProps.allTimeSlots })
} 

According to new changes you have to use

static getDerivedStateFromProps(nextProps, prevState){
   return {
      timeSlotArr: nextProps.allTimeSlots
  };
}