What I learned : Immutability as I understand it.

Snap Dragon — Tue, 07 Feb 2023 07:40:18 +0000

An immutable data type can be defined as one where the data cannot be changed. A new copy of the data type is returned with the altered data instead. Immutability is a very important concept in react. In order to re render a component react checks to see if state has changed by comparing the memory location of the old and new state object. If the memory locations are different , react determines that the state has changed and re renders the component. This is why its extremely important to change the contents of a state object in an immutable way instead of mutating the object.

import "./styles.css";
import {useState} from 'react'

export default function Shelf() {

  const [shelf, setShelf] = useState([]);
  const [book, setBook] = useState("");

  function handleFormSubmit(e){
    e.preventDefault();

    //Update shelf state in an immutable way to trigger 
    // a re render.
    setShelf([...shelf,book]);

  }

  return (

    <>
        <form onSubmit={handleFormSubmit}>
          <label htmlFor="book">Book: </label>
            <input type="text" id="book" value={book} onChange={(e)=> setBook(e.target.value)}/>

        </form>
        <ul className="App">
          {shelf.map((book,index)=><li key={index}>{book}</li>)}
        </ul>
    </> 
  );
}

What I learned : Controlled Components

Snap Dragon — Sat, 04 Feb 2023 10:22:48 +0000

A controlled component is one where the form's data is handled by state. Here are the steps to create a controlled component.

Import the useState hook from the react library.
Create the state inside of the component that will handle the form data.
Set the value of the input to the state variable.
Update the state every time in changes.

import {useState} from "react";
function App() {
    const [country, setCountry] = useState("");
    return <select value={country} onChange={e => setCountry(e.target.value)}>
        <option>Country</option>
        <option value="france">France</option>
        <option value="spain">Spain</option>
        <option value="germany">Germany</option>
    </select>
}

DEV Community: Snap Dragon

What I learned : Immutability as I understand it.

What I learned : Controlled Components