19 - React Bootstrap and State - Exercise

Overview

In this exercise we will practice including Bootstrap library to our project. We will create state for our components and swap rendered components using router functionality. If you don’t have AllDepartments and Department components, please download them from here

Task 1 - Include Bootstrap

1. React Bootstrap | React Bootstrap

2. Open a terminal (either Terminal in VSCode or Windows Powershell) pointing to your project folder. For this task we will work with the Department component from the previous exercise.

3. Type in npm install react-bootstrap bootstrap . After a short installation you should see the process finished with no errors. You may see some audit warnings, we will disregard those for now.

4. Open your package.json and check that the Bootstrap dependency has been indeed added.

   Open

   

5. In index.js include the following bootstrap css link

   import 'bootstrap/dist/css/bootstrap.min.css';

6. Create a new folder inside your src folder called assets. This is where all the pictures will go that we will use in our website. Download 5 random pictures from the internet, rename them to 1.jpg, 2.jpg, 3.jpg, 4.jpg and 5.jpg and place them into this folder.

7. We will use a Bootstrap component to help us style our Department component. We will use a Bootstrap Card component. https://react-bootstrap.github.io/components/cards/

8. Inside the Department component, replace the previous code with the Card component code. We will use the information from the props to be displayed in the Card and also dynamically generate the picture source.

   <Card style={{ width: '18rem' }}> <Card.Img variant="top" src={require(`../assets/${props.dept.dep_id}.jpg`)} /> <Card.Body> <Card.Title>{props.dept.dep_name}</Card.Title> <Card.Text> This is team {props.dept.team_id}. </Card.Text> <Button variant="primary">Go somewhere</Button> </Card.Body> </Card>

9. Run npm start and check the view in your browser.

Task 2 - Adding State

1. Create a new component called DepartmentForm.jsx

2. We will use Bootstrap Form component to help us create a nice looking form. We only need two fields - department name and team id.

   return ( <Form> <Form.Group className="mb-3" controlId="formDeptName"> <Form.Label>Department Name</Form.Label> <Form.Control type="text" placeholder="Enter department name"/> </Form.Group> <Form.Group className="mb-3" controlId="formTeamId"> <Form.Label>Team Id</Form.Label> <Form.Control type="text" placeholder="Enter team id"/> </Form.Group> <Button variant="primary" type="submit"> Submit </Button> </Form> )

3. In this case, we will need two variables - deptName and teamId - that will constitute the state for this component. They will change based on what the user types. So we need to declare them as state.

4. The input fields in the form we just created will be controlled components. We will pass in the initial values and make sure we get the updated values into our state variables whenever the user makes a change.

5. The state variables are now updated correctly with the values from the input field. The last thing to handle is the submit button. Let’s add an event handler for onSubmit event into the <Form> element.

6. Create an anonymous function and assign it to a variable called addDepartment. The function will accept one parameter - e - that represents the object of the event. First thing we will need to do it to stop the default behaviour - prevent the browser to create a post request. To do so, use the event's preventDefault() method.

7. Within the body of the anonymous functions, create a JSON object to represent the department - assign it an id, dep_name would have the value of the deptName state and team_id would have the value of teamID state variable.

8. You can use console.log to see the object's values.

9. Add the DepartmentForm to the view - include it into the AllDepartments.jsx component. We can use the Bootstrap layout components to help us to place our form next to the Cards showing the departments information.

Task 3 - Add inverse flow

1. We would like to add the previously created JSON dept object to our list of departments that resides in the AllDepartments.jsx component. That is also the parent of the DepartmentForm.jsx.

2. We will create the inverse flow - pass a handler from the parent( AllDepartments ) to the child ( DepartmentForm ) component.

3. The addDepartment is a variable holding an anonymous function that adds a new element to the array of departments.

4. In the child component - DepartmentForm - use the submitHandler props to invoke the addDepartment function.

5. When you run it, open your Inspect tool in the browser and you should see the updated array in your Console.