Day 23 ||Event handling in React ||Form in React

 React.js Topics

Day 23:

• Event Handling

• Form and form validation

Form and form validation:

ArtCompetitionForm.js

import './ArtCompetitionForm.css';

const ArtCompetitionForm = () => {

  const handleSubmit = (event) => {

    const formData = {

      name: event.target.name.value,

      age: event.target.age.value,

      artworkDescription: event.target.artworkDescription.value,

    };

    console.log(formData)

    // alert("Clicked");

    event.preventDefault();

    event.target.name.value="";

    event.target.age.value="";

    event.target.artworkDescription.value ="";

  };

  //    const handleChange = (event)=>{

  //     console.log(event.target.value, "ID")

  //    }

  return (

    <div className="art-competition-form-container">

      <h1>Art Competition Form</h1>

      <form onSubmit={handleSubmit}>

        <label>Name: </label>

        <input type="text" name="name" required/>

        <label>Age: </label>

        <input type="number" name="age" required/>

        <label>Artwork Description: </label>

        <textarea name="artworkDescription" required/>

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

      </form>

    </div>

  );

};

export default ArtCompetitionForm;

ArtCompetitionForm.css

.art-competition-form-container {

  background: url("https://images.unsplash.com/photo-1510935813936-763eb6fbc613?q=80&w=1778&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");

  background-size:100% 100%;

  height: 100vh;

  display: flex;

  justify-content: center;

  flex-direction: column;

  align-items: center;

}

.art-competition-form-container h1, label{

    display: block;

    margin: 5px;

}

.art-competition-form-container input,textarea{

    padding: 10px;

    width: 100%;

    border-radius: 5px;

    border: none;

}

.art-competition-form-container button[type="submit"]{

    width: 100%;

    background-color: blue;

    padding: 8px;

    color: white;

    border-radius: 5px;

    border: none;

    margin: 5px;

}

.art-competition-form-container button[type="submit"]:hover{

    background-color: green;

    cursor: pointer;

}

Interview Questions: 

1. Explain the concept of event handling in React?

2. What is the purpose of the onChange event in React? Provide an example.

3. What is the purpose of the e.preventDefault() method in a React form?