How to update component state that is connected by componentDidUpdate()-CodePudding

I am passing selectedOrderState as props from parent and want to populate the state and that works but can't figure how to change the state for use in an input field with an onChange=(handleChange) function attached to manipulate the data. Seems as though componentDidUpdate() and getDerivedStateFromProps() both seem to lock the state so no change can occur. **componentDidMount also does not work because the selectedOrderState prop comes from an onClick event and so the component had already mounted. Code below - Any thoughts would be helpful!

import React, { Component } from 'react'

export class addOrder extends Component {
state = {
    AoOrder: false,
    AoProgress: false,
    AoChat: false,
    visibility: "visible",
    Order: {},
    DeliveryDate:"",

  };
 //Functs
 componentDidUpdate(prevProps){
    if(this.props.selectedOrderState !== this.state.Order){
    this.setState({
                Order:this.props.selectedOrderState
            });
    }
 
 }  

 handleChange = (e) => {
   this.setState({
    Order:{
        ...this.state.Order,
        [e.target.id]: e.target.value,
      }

  })

};
handleSubmit = () => {

  };

 };  
render() {
    const order = this.props.selectedOrderState;
    const { user: { credentials: { handle, imageUrl}}} = this.props;
    
    return (
    
    <form className='OrderInfo'onSubmit={this.handleSubmit}>   
        <div  className='OrderInfoLbl'>Order Id:</div>
        <div  className="OrderInfoInput">{this.props.selectedOrderState.OrderId}</div>
        <div  className='OrderInfoLbl'>Delivery Date:</div>
        <input className="OrderInfoInput" id="DeliveryDate" type="text" onChange= 
         {this.handleChange}></input>
        <img className="ProfileBioSubmit" onClick={this.handleSubmit} 
         src="./images/svg/AcceptBtns.svg" alt="Edit"></img>     
    </form>
           
    )
   }
}

 export default addOrder

CodePudding user response：

Declare your state inside the constractor and bind your functions. I'm inviting you to take a look to forms docs with react

constructor(props) {
    super(props);
    this.state = {
        AoOrder: false,
        AoProgress: false,
        AoChat: false,
        visibility: "visible",
        Order: {},
        DeliveryDate:"",
    };
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
}

CodePudding user response：

Probably the most hackerish way to do something but it worked:) What i did was keep the componentDidUpdate() feeding the state to the child component but from the parent i passed down a function called handleChangeUP() for which i was able to use pass the event of onChange data through to change the original state selectedOrderState. Have a look!

Child

import React, { Component } from 'react'

export class addOrder extends Component {
state = {
   AoOrder: false,
   AoProgress: false,
   AoChat: false,
   visibility: "visible",
   Order: {},
   

};
//Functs
componentDidUpdate(prevProps){
  if(this.props.selectedOrderState !== this.state.Order){
  this.setState({
            Order:this.props.selectedOrderState
        });
  }

}  

handleChange = (e) => {
    this.props.handleChangeUP(e)
  };  
render() {
    const order = this.props.selectedOrderState;
    const { user: { credentials: { handle, imageUrl}}} = 
this.props;

   return (

   <form className='OrderInfo'onSubmit={this.handleSubmit}>   
    <div  className='OrderInfoLbl'>Order Id:</div>
    <div  className="OrderInfoInput"> 
      {this.props.selectedOrderState.OrderId}</div>
    <div  className='OrderInfoLbl'>Delivery Date:</div>
    <input className="OrderInfoInput" id="DeliveryDate" type="text" 
    value={this.state.Order.DeliveryDate} 
    onChange={this.handleChange}></input>
    <img className="ProfileBioSubmit" onClick={this.handleSubmit} 
     src="./images/svg/AcceptBtns.svg" alt="Edit"></img>     
   </form>
       
    )
  }
}

 export default addOrder

Parent

import React, { Component } from 'react'
import Child from './child'
export class Parent extends Component {
     state = {
    creating: false,//creat order window toggle
    profiling: false,//Profile window toggle
    chatting: false,//Chat window toggle
    searching: false,//Search inside Chat window
    selectedOrder: {}
    
};
 handleChangeUP = (e) => {
    console.log(e.target.id);
    this.setState({
       // [e.target.id]: e.target.value
        //Order: e.target.value
        selectedOrder:{
            ...this.state.selectedOrder,
            [e.target.id]: e.target.value
        }

    })
}
 render() {
    return (
             <div className="Wrapper">
                    <Child  handleChangeUP={this.handleChangeUP}
                            selectedOrderState={this.state.selectedOrder}/>
             </div>
     
    )
  }
}

export default Parent;