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

user_9441232 0
Viewed 1580

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
react-props reactjs state parent-child javascript
4 Answers

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
  };
}
user_26173440

I have it working just fine. https://jsfiddle.net/85zc4Lxb/

class App extends React.Component {
  render() {
    return (<Child passing="I am being passed to child" />);
  }
}

class Child extends React.Component {
  constructor(props) {
    super(props)
      this.state = {
        passedProp: this.props.passing,
      }
  }

  render() {
      return (
          <React.Fragment>
            <button>{this.state.passedProp}</button>
          </React.Fragment>
      )
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('container')
);
user_37256710

I try to recreate the scenario and it work try saving all your files again and then check

parents component

import React, { Component } from "react";
import TestOne from "./Components/TestOne/TestOne";

export class App extends Component {
  state = {
    x: "x data",
    y: "y data",
  };
  render() {
    return (
      <div>
        <TestOne x={this.state.x} allTimeSlots={this.state.y}/>
      </div>
    );
  }
}

export default App;

Child component

import React, { Component } from "react";

export class TestOne extends Component {
  constructor(props) {
    super(props);
    this.state = {
      sliceEnd: 5,
      sliceStart: 0,
      selectedSlotValue: "",
      timeSlotArr: this.props.x,
    };
  }
  render() {
    var timeSlotArrRender = this.props.allTimeSlots;
    return (
      <React.Fragment>
        {console.log("state", this.state.timeSlotArr)}
        {console.log("props", this.props)}
        {console.log("render variable", timeSlotArrRender)}

        <button className="button btn">right</button>
      </React.Fragment>
    );
  }
}

export default TestOne;

Result: enter image description here

user_137015840

I think you are missing this.setState({})

user_78057580
Related