CODEWITHSUNDEEP
javascriptreactjsjsx
William Sheppard
William Sheppard

Reputation: 105

Why is onClick function being called upon Render in one situation but not the other situation

Description of what I built: Add/Remove friends from a list.

Overview: I have two situations where I am passing a function through an on-click event.

Situation #1: <button onClick = {this.handleAddFriend}>Submit</button>

Situation #2: <button onClick={() => props.onRemoveFriend(name)}>Remove</button>

Analysis: This code works as expected. However, I was under the impression that, "if you merely invoke a method as shown in Situation #1, then upon rendering, React will immediately call this function. (using an anonymous function is one way to prevent this)"

My question: Why doesn't Situation #1 break my code, given my understanding from above?

Here is my full code:

<!DOCTYPE html>
<html>
<head>
    <title> First React App</title>
    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head> 
<body>  
    <div id = 'app'></div>
    <script type = 'text/babel'>

        //Function Component: Does not manage it's own state
        function FriendsList(props) {
            return (
                <ul>
                    {props.list.map((name) => (
                        <li key = {name}>
                            <span>{name}</span>
                            <button onClick={() => props.onRemoveFriend(name)}>Remove</button>
                        </li>
                    ))}
                </ul>
            )
        }

        //Class Component: Manages it's own state
        class App extends React.Component {
            constructor(props) {
                //Invokes the constructor for the React Component Class(parent-class)
                super(props);

                //state now lives within the component
                this.state = {
                    friends: ['Jordyn', 'Mikenzi', 'Jake'],
                    input: ''
                }

                // "this" refers to an instance of the "App" component.
                console.log(this) 

                //You are "binding"/referencing the following method to "this" instance
                this.handleRemoveFriend = this.handleRemoveFriend.bind(this);
                this.handleAddFriend = this.handleAddFriend.bind(this);
                this.updateInput = this.updateInput.bind(this);

            }
            handleAddFriend() {
                this.setState((currentState) => {
                    return {
                        friends: currentState.friends.concat([this.state.input]),
                        input: ''
                    }
                })
            }
            handleRemoveFriend(name) {
                this.setState((currentState) => {
                    return {
                        friends: currentState.friends.filter((friend) => friend !== name)
                    }
                })
            }

            updateInput(e) {
                const value = e.target.value;
                this.setState({
                    input: value
                })
            }


            render() {
                return (
                    <div>
                        <input type = 'text'
                               placeholder = 'Type a new friend here!'
                               value = {this.state.input}
                               onChange = {this.updateInput}
                        />
                        <button onClick = {this.handleAddFriend}>Submit</button>                              
                        <FriendsList                                      
                            list = {this.state.friends}                    
                            onRemoveFriend = {this.handleRemoveFriend}>   
                        </FriendsList>                                    
                    </div>                                                
                    )
                }
        }

        ReactDOM.render(
            <App />,
            document.getElementById('app')
            );
    </script>
</body>

Upvotes: 0

Views: 61

Answers (1)

Carlos Saiz Orteu
Carlos Saiz Orteu

Reputation: 1805

You are only passing the function, to invoque it you would need to do this:

this.handleAddFriend()

Upvotes: 1

Related Questions