Inputs and Forms

Click for More on Events

Create an Editor

Create a form

• with an onSubmit handler that logs the event
• with a single input

      
        class Editor extends React.Component {
          onSubmit(event) {
            event.preventDefault();
            console.log(event);
          }

          render() {
            return (
              // insert code here
            );
          }
        }
      
    

Possible Solution

      
        class Editor extends React.Component {
          onSubmit(event) {
            event.preventDefault();
            console.log(event);
          }

          render() {
            

              
            
          }
        }
        const styles = {
          editor: {
            padding: '0 20px',
            marginBottom: '20px',
          },
          input: {
            padding: '10px',
            width: 'calc(100% - 20px)',
          },
        };
      
    

Add a new message to the existing list

• Initialize state with messages
• Concatenate state messages with new message
• Pass state messages into MessagesList

      
        class App extends React.Component {
          constructor(props) {
            /* insert code here */
          }

          addMessage(newMessage) {
            /* insert code here */
          }
        }
      
    

Possible Solution

      
        class App extends React.Component {
          constructor(props) {
            super(props);
            this.state = {messages: messages};
            this.addMessage = this.addMessage.bind(this);
          }

          addMessage(newMessage) {
            const currentMessages = this.state.messages;
            const currentPlusNewMessages = currentMessages.concat(newMessage);
            this.setState({messages: currentPlusNewMessages});
          }

          render() {
            return (
              

                /* existing code */
                

                  /* existing code */
                  <Editor addMessage={this.addMessage} />
                
              
            );
          }
        }
      
    

Use addMessage in Editor to "send" the message

• Get data from form
• Use fake data for name
• Call addMessage with data

      
        class Editor extends React.Component {
          constructor(props) {
            /* insert code here */
          }

          sendMessage(event) {
            /* insert code here */
          }
        }
      
    

Possible Solution

      
        class Editor extends React.Component {
          constructor(props) {
            super(props);
            this.sendMessage = this.sendMessage.bind(this);
          }

          sendMessage(event) {
            event.preventDefault();
            const form = event.target;

            const text = form.text.value;
            const timestamp = new Date();
            const name = 'Some name';

            const {addMessage} = this.props;
            addMessage({avatarUrl, name, text, timestamp});
          }

          render() {
            return (
              

                <input /* existing code */ />
              
            );
          }
        }
      
    

Controlled vs Uncontrolled Components

Uncontrolled

• Basic inputs
• User has control
• React does not
• Use with default values

Controlled

• Value is set via a prop
• Usually has an onChange handler
• React has control
• User does not

Use uncontrolled when...

• You only get the value once
• You do not need validation or validate later

Use controlled when...

• You want to trigger other effects
• You want to validate as the input changes

Make the Editor Input Controlled

• Add value to state
• Set value on input
• Define and use onChange handler

      
        class Editor extends React.Component {
          constructor(props) {
            /* insert code here */
          }

          onChange(event) {
            /* insert code here */
          }

          render() {
            return (
              

                <input /* insert code here */ />
              
            );
          }
        }
      
    

Possible Solution

      
        class Editor extends React.Component {
          render() {
            return (
              

                <input /* existing code */ />
              
            );
          }
        }
      
    

Conditional Rendering

      
        render() {
          if (this.state.isBarking) {
            return (
              <HugeDog />
            );
          }

          return (
            <TinyDog />
          );
        }
      
    

Create a FakeLoginScreen

• Create FakeLoginScreen.js
• Create a form with an input for a name with a log in button and takes in a login prop
• In App.js, add name and loggedIn to state
• In App.js, render FakeLoginScreen if not logged in
• In App.js, pass name into Editor when logged in

Possible Solution

      
        const FakeLoginScreen = ({login}) => {
          return (
            

              

                Login Screen
              
              
              
                Log In
              
            
          );
        };

        const styles = {
          form: {
            width: '230px',
            margin: 'auto',
          },
          input: {
            width: '100%',
            fontSize: '20px',
          },
          button: {
            display: 'block',
            width: '100%',
            fontSize: '20px',
          },
        };
      
    

Higher Order Functions

• Takes in a function
• Or outputs another function as a result

Map

      
        const multiplyBy10 = (number) => number * 10;
        array.map(multiplyBy10);
      
    

Create Logging Wrapper

Possible Solution

      
        function logArguments(innerFunction) {
          return (...args) => {
            console.log("calling with", args);
            return innerFunction(...args);
          };
        }
      
    

      
        const add = (a, b) => a + b;
        const addWithLogging = logArguments(add);
        addWithLogging(7, 9);
        logArguments(add)(7, 9)
      
    

Containers vs Components

Break