ReactJS: How to set state with props?

Question

I am trying to set props thats passed from ExportReportRoomSelectionModal to state in ExportModal. In the props there is an array selectedRooms. When I console.log(this.props.selectedRooms). I can see the array has been passed as props <ExportModal selectedRooms={this.state.selectedRooms} but when I set it to state on ExportModal.js like so roomIdNo: props.selectedRooms || [] it doesn't seem to register therefore the value of roomId remains empty or null on ExportModal.js.


export default class ExportReportRoomSelectionModal extends React.Component {

    constructor(props) {
        super(props);

        const roomOrder = configContext.value.roomOrder;

        this.state = {
            rooms: roomOrder,
            selectedRooms: []
        };

        this.onSelectRooms = this.onSelectRooms.bind(this);
    }

    onSelectRooms = (e) => {

        const { selectedRooms } = this.state;
        const { id } = e.target;

        //remove room
        if(selectedRooms.includes(id)) { 
            const newSelectedRooms = selectedRooms.filter((name) => name !== id);
            this.setState({
                selectedRooms: newSelectedRooms
            });
        //add room
        } else{
            this.setState({
                selectedRooms: [...selectedRooms, id]
            }); 
        }
    }


    render() {


        return (
            <Modal >
                <Modal.Header closeButton>
                    <Modal.Title>Print PDF</Modal.Title>
                </Modal.Header>
                <Modal.Body>
                    <p>Please select rooms</p>

                    <Grid fluid={true}> 
                        <Row className="show-grid">
                            { this.state.rooms.map((roomName, i ) => 

                                <Col key={i} xs={2} md={2}>
                                    <Panel 
                                        onClick={this.onSelectRooms}>         
                                        <Panel.Heading id={roomName}> 
                                            {roomName}                               
                                        </Panel.Heading>
                                    </Panel> 
                                </Col>
                            )}
                        </Row>
                    </Grid>

                </Modal.Body>
                <Modal.Footer>
                    <Button 
                        bsStyle="primary" 
                        onClick={this.props.handleHide}
                        data-toggle="modal"
                        data-dismiss="modal"
                        data-target="#export-modal"
                    >
                        Send PDF
                    </Button>
                    <Button bsStyle="primary" >Close</Button>
                </Modal.Footer>
                <ExportModal selectedRooms={this.state.selectedRooms} /> 
            </Modal>);
    }
}


export default class ExportModal extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            roomIdNo: props.selectedRooms || [],

        };

If you are trying to get the id of an element you need to do `e.target.id`. That might be the problem. — Enes T., Jun 30 '19 at 20:15
I also tried passing props as state and it worked for me. At your side, it must be some other problem. Also, you should check the link to understand the pros and cons of this approach: https://medium.com/@justintulk/react-anti-patterns-props-in-initial-state-28687846cc2e, https://daveceddia.com/where-initialize-state-react/, and https://stackoverflow.com/questions/40063468/react-component-initialize-state-from-props. Better if you can change your approach. — YATIN GUPTA, Jun 30 '19 at 20:30
@MichaelPaccione yes i have tried this.props.selectedRooms. I think when my exportmodal.js renders it looses the props. Prior to that while on MultiExportmodal.js i can console.log(this.props.selectedRooms) on exportmodal.js and I can see it on console. — Jose, Jul 01 '19 at 10:10

score 1 · Answer 1 · answered Jun 30 '19 at 20:23

Using your id in .map() iteration returning callback for the modification of the id value passed.

export default class ExportReportRoomSelectionModal extends React.Component {
    constructor(props) {
        super(props);
        if (Array.isArray(props.roomOrderInit))
            throw new Error("Room order is not an array");
        this.state = {
            rooms: props.roomOrderInit,
            selectedRooms: props.selectedRoomsInit || []
        };
        this.onSelectRooms = this.onSelectRooms.bind(this);
    }
    onSelectRooms(id) {
        return () => {
            const { selectedRooms } = this.state;
            //remove room
            if (selectedRooms.includes(id)) {
                const newSelectedRooms = selectedRooms.filter((name) => name !== id);
                this.setState({
                    selectedRooms: newSelectedRooms
                });
                //add room
            } else {
                this.setState({
                    selectedRooms: [...selectedRooms, id]
                });
            }
        }
    }
    render() {
        return (
            <Modal >
                <Modal.Header closeButton>
                    <Modal.Title>Print PDF</Modal.Title>
                </Modal.Header>
                <Modal.Body>
                    <p>Please select rooms</p>

                    <Grid fluid={true}>
                        <Row className="show-grid">
                            {this.state.rooms.map((roomName, i) =>
                                <Col key={i} xs={2} md={2}>
                                    <Panel
                                        onClick={this.onSelectRooms(roomName)}
                                        bsStyle={this.state.selectedRooms.includes(roomName) ? 'success' : 'default'} >
                                        <Panel.Heading id={roomName}>
                                            {roomName}
                                        </Panel.Heading>
                                    </Panel>
                                </Col>
                            )}
                        </Row>
                    </Grid>

                </Modal.Body>
                <Modal.Footer>
                    <Button
                        bsStyle="primary"
                        onClick={this.props.handleHide}
                        data-toggle="modal"
                        data-dismiss="modal"
                        data-target="#export-modal"
                    >
                        Send PDF
                    </Button>
                    <Button bsStyle="primary" >Close</Button>
                </Modal.Footer>
                <ExportModal selectedRooms={this.state.selectedRooms} />
            </Modal>);
    }
}

ReactJS: How to set state with props?

1 Answers1