Build a Page Layout in Gatsby

Create a React Form in Gatsby

Generate Dynamic Routes in Gatsby with Reach Router

Manage Application State in Gatsby with React Hooks

Generate an Access Token for Users with Twilio Serverless Functions

Consume a Generated Twilio Token in Gatsby with React Hooks

Restrict Access in Gatsby with Protected Routes

Connect Video to a Room with React Hooks in Gatsby

Show Video in Gatsby from Remote Participants with React Hooks

Handle Disconnected Participants with React Hooks and the Twilio API

Build a Video Chat App with Twilio and Gatsby

Each video chat will happen in a "room". To do that, we need a way for people to identify themselves and choose which room they want to join.

In this lesson, we'll create a form with `useState` React hooks that accepts user input.

Instructor: [00:01] We need to allow people to join a room. To do that, we need a form. We're going to create a component and that will be called join.js. Inside, we're going to import React and we also need to track state of the components, the input specifically. We're going to import use state from React.

[00:18] Our component is going to be called join and it doesn't take any props. It will however keep track of the identity of the person, that'll be their first name or whatever they want to go by. A set identity, which is how we're going to set that and that will come from use state, which will start as an empty string.

[00:36] Then, we need to do the same thing for the room name. We'll set up room name and set room name from use state as an empty string as well. The form itself is going to be inside of a fragment because we want to send back an H1 that'll say, "Start or join a video call." Then, we need to have our form as well.

[00:57] To use the CSS, that is predefined in layout CSS over here, we're going to use class names, so this is going to be called start form. Inside of it, we need to have three things. We need to get the name, the room name and a button to submit the form.

[01:13] Let's start by adding a label and we're going to make this accessible. We'll add an HTML 4, that will be for the identity. Inside of this, we'll use display name and then we need to put in an input.

[01:25] The input is going to be a text type. It will also have an ID of identity that needs to match the HTML 4. These two need to be the same. The value is going to be this identity variable here. We'll pull that in and on change, we need to update that.

[01:44] We will get the event and we will use the set identity helper from use state to update the value to the event target value. That'll be whatever somebody types into this input gets saved using set identity into this identity variable.

[02:01] We need to do exactly the same thing for the room name, so we can duplicate this block entirely. We'll change this to room name and then we need to update this one to use the set room name helper instead.

[02:13] Finally, we need to set button of type submit and will say, "Join video chat." Next, we need to actually put this on our home page because if we look at our page right now, nothing's happening.

[02:26] To use it, we're going to go into index.js. We're going to import join from components join and then we're going to swap out this H1 for our join component. Now that we've defined this component, we need to export it as our default. We'll export default join.

[02:44] Once we've saved this, we can go back out to our preview. Because gatsby develop is still running, it'll auto update it. We can jump over here, reload the page, and we'll see our component. It shows our headline and our form. If we update it, we can see that the values have updated.

[03:01] However, nothing happens yet. If I submit this, we don't see anything happen. It just refreshes the page. Next, we need to add an actual submission handler.

Course

Build a Video Chat App with Twilio and Gatsby

Create a React Form in Gatsby

Share this video with your friends