Passing Props to Child Component as State in React

Question

I have a list which has this Modal component. If a user clicks a certain row in the list, the props within that row are passed down to the Modal Component.

When the props are passed to the Modal, I want to call componentWillReceiveProps to set the props passed as part of the Modal's state. I do this because props like title, status and cost are eventually going to be controlled inputs that are updated via the Modal's state.

My only problem is componentWillReceiveProps is only called once and the props are not passed down to the Modal's state. Is there a way to pass these props to the child component as the state?

I'm using the Modal from React-Bootstrap

Parent Component:

        <AdditionalPaymentsModal 
          status={'New'}
          id= {null} 
          title={'testong'}
          cost={''} />

Child Component:

class AdditionalPaymentsModal extends Component {
  constructor(props){
    super(props);
    this.state = {
      showModal: this.props.showModal,
    };
    this.close = this.close.bind(this);
    this.open = this.open.bind(this);
  }

  close() {
    this.setState({ showModal: false });
  }

  open() {
    this.setState({ showModal: true });
  }

  componentWillReceiveProps(nextProps){  
    console.log("SETTING THE STATE", this.state);
      this.setState({
        id: nextProps.id,
        title:nextProps.title, 
        status: nextProps.status, 
        cost:nextProps.date
    })
  }

render(){
  const {id, title, status, cost} = this.props;

  return (
    <div>
        <Button
          onClick={this.open}>
          Open
        </Button>
        <Modal show={this.state.showModal} onHide={this.close}>
          <Modal.Header closeButton>
            <Modal.Title>New Edit Cost</Modal.Title>
          </Modal.Header>
          <Modal.Body>
          {this.state.title}
          {this.state.id}
          {this.state.cost}
          {this.state.status}
          </Modal.Body>
          <Modal.Footer>
            <Button onClick={this.close}>Cancel</Button>
          </Modal.Footer>
        </Modal>
      </div>
   );
  }
}

could try putting this.setState({ id: props.id, title: props.title, status: props.status, cost: props.date }) in your constructor override, instead of componentWillReceiveProps — bryce
I'd like to add that if the component is receiving these values as props then there should be no reason to have them set to state since you will most likely be passing them back up to the component that grabbed these values when modified. You can do it, but its just redundant since changing the value at the top will automatically update all the children. — Chase
@brycedorn I took the componentWillRecieveProps out and under super(props) of the modal component replaced it with what you used. I didn't seem to generate anything on the modal :/ — lost9123193
are you sure props are being passed through correctly? what does a console.log(props) below super(props) return? — bryce
@brycedorn ok I get this in console.log(props) Object {status: "New", id: null, title: "testong", cost: ""} but it is still blank in the modal — lost9123193

bryce bryce · Accepted Answer · 2016-12-14T21:30:30

it doesn't look like you're modifying the props being passed in; if you're just looking to display them then they don't need to be in state.

you already have the props initialized in your render function:

const {id, title, status, cost} = this.props;

all you need to do is reference these - no need for your constructor to put these in state:

render () { ... <Modal.Body> {title} {id} {cost} {status} </Modal.Body> ... }

Passing Props to Child Component as State in React

1 Answers