cannot read property 'function name' of undefined React js

Question

im working with the modal from https://react-bootstrap.netlify.app/components/modal/ and basically i've managed to display a modal from a button that i click. However inside the modal there's another button that when i click should perform a task i've defined in a function already. Now when i click this button in the modal i get the error cannot read property 'confirm_booking' of undefined Here is my code.

constructor(props){
         super(props)

           this.state={
                          setModalShow_available_room: false,
                          modalShow_available_room: false
                        }

                 this.confirm_booking = this.confirm_booking.bind(this)
          }

render (){

            function Available_room_modal(props) {
            return (
                <Modal
                    {...props}
                    size="sm"
                    aria-labelledby="contained-modal-title-vcenter"
                    centered>

                    <Modal.Body>
                        <Button block onClick={() => { this.confirm_booking() }} >Confirm</Button>
                    </Modal.Body>

                </Modal>
            );
        }

return(
           <div>
                  <Button block onClick={() => { this.open_modal() }} >Show modal</Button>

                   <Available_room_modal
                    show={this.state.modalShow_available_room}
                    onHide={() => {
                        this.setState({ setModalShow_available_room: false })
                        this.setState({ modalShow_available_room: false })
                    }} />
           </div>
)


}

/**then for my functions **/

/**this opens the modal **/
open_modal() {
            this.setState({ setModalShow_available_room: true })
            this.setState({ modalShow_available_room: true })
    }

/**this is the function assigned to the button inside the modal which throws an error when i click it**/
confirm_booking() {   
     this.setState({ setModalShow_available_room: false })
     this.setState({ modalShow_available_room: false }) 
    }

[Creating a component in the render function is an anti-pattern.](https://stackoverflow.com/a/59636503/1218980) Move `Available_room_modal` out of your component. You could even make it its own file. — Emile Bergeron, May 07 '20 at 05:05
Does this answer your question? [How to access the correct \`this\` inside a callback?](https://stackoverflow.com/questions/20279484/how-to-access-the-correct-this-inside-a-callback) — Emile Bergeron, May 07 '20 at 05:07
The problem though is that `function Available_room_modal` creates its own context (explained in the link above), which means that inside this function, `this.confirm_booking` is undefined. — Emile Bergeron, May 07 '20 at 05:09
The quick fix is to pass some `this.confirm_booking` as a prop to `Available_room_modal `: `` — Emile Bergeron, May 07 '20 at 05:11

score -1 · Answer 1 · answered May 07 '20 at 03:33

-1

you are clearly not understanding how react works. Please try to see the react documentation first.

I will try to show you some of your errors:

You can't declare a function inside render method. Render method is just to return JSX code. You could declare a function in the class, return jsx from there and call it from render, that is valid.

<Button block onClick={() => { this.confirm_booking() }} >Confirm</Button>

Here, you are calling this.confirm_booking EVERY time your component is being rendered. You should change it to this:

<Button block onClick={this.confirm_booking}> Confirm </Button>

answered May 07 '20 at 03:33

Maximiliano Poggio

1,162
10
23

i get this error after changing it to {this.confirm_booking} `TypeError: Cannot read property 'confirm_booking' of undefined` – sam May 07 '20 at 03:57
i brought the function out of the render method and declared it like the other functions and now it gives `Available_room_modal' is not defined react/jsx-no-undef` – sam May 07 '20 at 04:03
@sam that part of your code is already correct, on the other hand, this answer is incorrect. – Emile Bergeron May 07 '20 at 05:03

cannot read property 'function name' of undefined React js

1 Answers1