8.3.ReactJs Objects Tips

Get Keys and Values of Objects

const car = [{
    city_mpg: 23,
    class: 'compact car',
    combination_mpg: 24,
    cylinders: 4,
    displacement: 1.6,
    drive: 'fwd',
    fuel_type: 'gas',
    highway_mpg: 26,
    make: 'toyota',
    model: 'corolla',
    transmission: 'a',
    year: 1993
  },
  {
    city_mpg: 23,
    class: 'compact car',
    combination_mpg: 26,
    cylinders: 4,
    displacement: 1.6,
    drive: 'fwd',
    fuel_type: 'gas',
    highway_mpg: 31,
    make: 'toyota',
    model: 'corolla',
    transmission: 'm',
    year: 1993
}]

Object.entries(car).map(([key, value])=>(
  <div className="flex justify-between gap-5 w-full text-right" key={key}>
     <h4 className="text-gray capitalize">{key.split("_").join(" ")}</h4>
     <p className="text-black-100 font-semibold">{value}</p>
   </div>
))

or

const object1 = {
  a: 'somestring',
  b: 42,
};

for (const [key, value] of Object.entries(object1)) {
  console.log(`${key}: ${value}`);
}

Get Form Values as FormData

Note: Not compatible on Multiple Checkbox

const App = () => {

    handleSubmit(event) {
         event.preventDefault();
         const myFormData = new FormData(event.target);

         const formDataObj = Object.fromEntries(myFormData.entries());
         console.log(formDataObj);
    }

    return (
      <form onSubmit={this.handleSubmit}>
        <label htmlFor="username">Enter username</label>
        <input id="username" name="username" type="text" />
        <button>Send data!</button>
      </form>
    );

}

export default App

{
    "name": "John Doe",
    "email": "john@gmail.com",
    "message": "Hello World"
}

Fix: Get Form Values as FormData Compatible with Multiple Checkbox

const App = () => {

    function handleSubmit(event) {
        event.preventDefault();
        const myFormData = new FormData(event.target);

        const formDataObj = Object.fromEntries(myFormData.entries());
        formDataObj.favorite_pet = myFormData.getAll('favorite_pet');
        console.log(formDataObj);
    });
    return(
        <form onSubmit={this.handleSubmit}>
            <div class="form-control">
                <label for="name">Full Name</label>
                <input id="name" name="name" type="text" />
            </div>
            <div class="form-control">
                <label for="email">Email Address</label>
                <input id="email" name="email" type="email" />
            </div>
            <div class="form-control">
                <label for="message">Enter a Message</label>
                <textarea id="message" name="message" rows="6" cols="65"></textarea>
            </div>         
            <div class="form-control-2">
                <p class="group-label">Your favorite pet:</p>
                <input type="checkbox" name="favorite_pet" value="Cats" />Cats
                <input type="checkbox" name="favorite_pet" value="Dogs" />Dogs
                <input type="checkbox" name="favorite_pet" value="Birds" />Birds
            </div>
            <button>Send data!</button>
        </form>
    );
}
export default App;

{
    "name": "uhuk",
    "email": "hukhhk@jf.ff",
    "message": "jgghhjb",
    "favorite_pet": [
        "Cats",
        "Birds"
    ]
}