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

Question

Create a React app that allows users to register { name, surname, age, location } and validate the inputs, store registration data inside an array, display list of users on the next component called Users. Allow users to click on current registered users to display a selected user data on the next component called UserInfo, a user should be able to update data/information of registered user.

Answer 1

Users.jsx

import React, {Component} from 'react';

class Users extends Component {
    users = [];

    constructor(props) {
        super(props);

        this.state = {
            name: "",
            surname: "",
            age: "",
            location: ""
        }
    }


    handlechangeall = (event) => {
        this.setState({[event.target.name]: event.target.value})
    }

    handlesubmit = (event) => {
        console.log(JSON.stringify(this.state));
        this.users.push(this.state);
        console.log(this.users);
        event.preventDefault();
    }

    render() {
        return (
            <div>
                <form onSubmit={this.handlesubmit}>
                    <label className="n"> Name </label><br/>
                    <input type="text" name="name" value={this.state.name}
                           onChange={this.handlechangeall}/> <br/>

                    <label className="n"> Surname </label><br/>
                    <input type="surname" name="surname" value={this.state.surname}
                           onChange={this.handlechangeall}/> <br/>

                    <label className="n"> Age </label><br/>
                    <input type="number" name="age" value={this.state.age}
                           onChange={this.handlechangeall}/> <br/>

                    <label className="n"> Location </label><br/>
                    <input type="text" name="location" value={this.state.location}
                           onChange={this.handlechangeall}/> <br/>


                    <input type="submit" value="Submit"/>
                </form>
            </div>
        )
    }
}

export default Users;