Coding problem 39

Create an Employee Name list by creating 2 input boxes, one to accept the First Name and other to
accept the last name of an employee, on click of the submit button, full name should be displayed
below the input boxed, then enter the details of second employee and generate an employee full
name list using React Arrays and useStates.

The output should look like this:

Solution:

App.js

import React, {useState} from 'react'

const App = () => {

const [firstName, setFirstName] = useState("");

Full Stack Development Specialization Training Page 1 of 2

 const [lastName, setLastName] = useState("");

const[fullName, setFullName] = useState([]);

const submitForm = (e) => {

e.preventDefault();

const newFullName = {firstName : firstName, lastName : lastName};

setFullName([...fullName, newFullName]);
console.log(fullName)

}
return (
<>
<form action='' onSubmit={submitForm}>
<div>
<label> First Name : </label>
<input name="firstName" value={firstName}
onChange={(e)=>setFirstName(e.target.value)}/>
</div>
<div>
<label> Last Name : </label>
<input name="lastName" value={lastName}
onChange={(e)=>setLastName(e.target.value)}/>
</div>

<button type="submit">Submit</button>

</form>
<div>
{
fullName.map((curElem, index)=>{
return(
<p key={index}>
<span> Full Name : </span>
<span>{curElem.firstName}</span>
<span> </span>
<span>{curElem.lastName}</span>

Full Stack Development Specialization Training Page 2 of 2

 </p>
)
})
}
</div>
</>
)
}

export default App

Coding problem 40

On loading the web page, print an alert that says “Page loaded”. Use useEffect for this. It should
only run once, when the page is loaded. Then, use useState to change the title of the web page
from ‘Page Title’ when it was first loaded to ‘Page Title 1’ when you press the button right below
the title. Toggle the value of the title whenever the button is pressed, from Page Title to Page Title 1

The output should look like this when it’s first loaded:

Then, once you press the ok button, you should get something like this:

Full Stack Development Specialization Training Page 3 of 2

 When you press the ‘Toggle Title’ button, the title should change like this:

Now, every time you press the Toggle Title button, the title should toggle.

Solution:

App.css

.App {
width: 70%;
height: auto;
text-align: center;
background-color: #ff6666;
margin: 70px auto;
padding: 20px;
border: 2px solid brown;
border-radius: 5px;
}

.App h1 {
font-size: 5em;
color: #fff;

Full Stack Development Specialization Training Page 4 of 2

 text-shadow: 2px 2px 0px rgba(0,0,0,0.5);
}

App.js:
import { useEffect, useState } from 'react';
import './App.css';

function App() {

const [title, setTitle] = useState('Page Title');

useEffect(() => {
alert('Page loaded!');
}, []);

const toggleTitle = () => {

if(title === 'Page Title') setTitle('Page Title 1')
else setTitle('Page Title');

return (
<div className="App">
<h1>{title}</h1>
<br/><br/>
<button type="button" className="btn btn-primary" onClick={toggleTitle}>Toggle
Title</button>
</div>
)

export default App;

Full Stack Development Specialization Training Page 5 of 2