Answer to Question #220793 in HTML/JavaScript Web Application for Poly

Question

Create a React App that displays list of users from an array "Two dimensional" [ values : name, surname, age , location ], create a function to check users age, conditions [ if users age is 18 display 'You are old enough to code' else 'You are not old enough to code'] 

Display :

Name | surname and age - 'if statement results here',

Answer 1

App.js

import UserList from "./component/UserList";


function App() {
  return (
    <div className="App">
      <div className="wrapper">
         <UserList/>
      </div>
    </div>
  );
}


export default App;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';


ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);


reportWebVitals();

UserList.js

import { useState } from "react";


const UserList = () => {
   const [users, setUsers] = useState([
      // id, name, surname, age, location
      [1,"Ura", "Sokolov", 18 , "Ukrainian" ],
      [2,"Loki", "Sokolov", 12 , "Azgard" ],
      [3,"Peter", "Parker", 22 , "USA" ],
      [4,"Tony", "Stark", 16 , "German" ],
   ]);
   const [selectedUser, setSelectedUser] = useState();
   const [result, setResult] = useState("");
   const [name, setName] = useState("");
   const [surname, setSurname] = useState("");
   const [age, setAge] = useState("");
   const [location, setLocation] = useState("");
   const checkUserAge = (user) => { // check user age to code
      setSelectedUser(user); // set selected user for diplay result for him 
      user[3] <= 18 ? setResult('You are old enough to code') : setResult('You are not old enough to code');
   }
   const addUser = (e) =>{
      e.preventDefault();
      setUsers(users.concat([[Date.now(),name,surname,age,location]]))
   }
   return (
      <div className="container">
         <div className="list">
         <h1 className="title">Users check age</h1>
            {users.map(user =>{
               return(
                  <div className="list__item" key={user[0]}>
                     <div className="list__content">
                        <p className="list__user">{`${user[1]} | ${user[2]} ${user[3]} ${user[4]}`}</p>
                        {/* if selected user is not null or undefeated we display result for him*/}
                        {selectedUser && <p className="list__user-result">{selectedUser[0] === user[0] ? `result: ${result}` : '' }</p>}
                     </div>
                     {/* button for activ function checkUserAge()*/}
                     <button type="button" className="btn" onClick={checkUserAge.bind(null, user)}>Check</button>
                  </div>
               )
            })}
         {/* Bonus!!! add new user for extend users*/}
         <div className="add-user">
            <h2 className="title">Add user</h2>
            <form className="add-user__form" onSubmit={addUser}>
               <div className="add-user__group">
                  <div className="add-user__block">
                     <label className="add-user__label" htmlFor="name">Name:</label>
                     <label className="add-user__label" htmlFor="surname">Surname:</label>
                     <label className="add-user__label" htmlFor="age">Age:</label>
                     <label className="add-user__label" htmlFor="location">Location:</label>
                  </div>
                  <div className="add-user__block">
                     <input 
                        className="add-user__input" type="text" name="name"
                        onChange={(e) => setName(e.target.value)} required />
                     <input className="add-user__input" type="text" name="surname" 
                        onChange={(e) => setSurname(e.target.value)} required />
                     <input className="add-user__input" type="number" name="age" 
                        onChange={(e) => setAge(e.target.value)} required />
                     <input className="add-user__input" type="text" name="location" 
                        onChange={((e) => setLocation(e.target.value))} required />
                  </div>
               </div>
               <button type="submit" className="btn add-user__btn">Add</button>
            </form>
         </div>
         </div>
      </div>
   );
}
 
export default UserList;

index.css

/*======================Reset CSS======================*/
* {
  padding: 0;
  margin: 0;
  border: 0;
}


*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}


nav, footer, header, aside {
  display: block;
}


html, body {
  height: 100%;
  width: 100%;
  font-size: 100%;
  line-height: 1;
  font-size: 14px;
  -ms-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}


input, button, textarea {
  font-family: inherit;
}


input::-ms-clear {
  display: none;
}


button {
  cursor: pointer;
}


button::-moz-focus-inner {
  padding: 0;
  border: 0;
}


a, a:visited {
  text-decoration: none;
}


a:hover {
  text-decoration: none;
}


ul li {
  list-style: none;
}


img {
  vertical-align: top;
}


h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
  font-weight: 400;
}


/*======================Import======================*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');


/*======================Common======================*/
body{
   font-family: 'Poppins', sans-serif;
   background-color: #282c34;
   color: #282c34;
}


.wrapper{
   min-height: 100vh;
   width: 100%;
   overflow: hidden;
   padding-top: 50px;
}
.container{
   max-width: 600px;
   margin: 0px auto;
}
.btn{
   margin-top: 5px;
   border-radius: 4px;
   color: #fff;
   padding: 2px 5px;
   background: #283747;
   transition: all 0.3s ease;
}
.btn:hover{
   background: #12232E;
}
.title{
   text-align: center;
   font-weight: 600;
   font-size: 18px;
   margin-bottom: 20px;
}
/*======================List Users======================*/


.list{
   background: #fff;
   border-radius: 4px;
   padding: 10px 20px;
}


.list__item:not(:last-child){
   margin-bottom: 10px;
}
.list__user,.list__user-result{
   font-weight: 500;
   font-size: 16px;
}
.list__content{
   display: flex;
   align-items: center;
   justify-content: space-between;
}


/*======================Add user======================*/
.add-user__group{
   display: flex;
   align-items: center;
}
.add-user__block:not(:last-child){
   margin-bottom: 10px;
}
.add-user__block{
   display: flex;
   flex-direction: column;
}
.add-user__label:not(:last-child){
   margin-bottom: 20px;
}
.add-user__label{
   margin-right: 10px;
}
.add-user__input{
   border: 1px solid #283747;
   border-radius: 2px;
   padding-left: 5px;
   margin-bottom: 10px;
}
.add-user__btn{
   align-self: flex-start;
   padding: 2px 10px;
}


@media(max-width: 550px){
.list__content{
   flex-direction: column;
   align-items: flex-start;
}
}

Other files by default