React Hooks

React hooks are used to manage the state of the componenets.

useState() is one of special react hooks function. useState() return two objects a) state object(getter) b) updater function(setter)

const [currentStateValue, functionToSetNewStateValue] = useState(intialStateValue)

function Button() {
  const [counter, setCounter] = useState(0);
  return <button onClick={() => setCounter(counter + 1)}>{counter}</button>;
}

ReactDOM.render(<Button />, document.getElementById("mountNode"));
function Button() {
  const [counter, setCounter] = useState(5);
  //onClick, onChange these are special names of events, we pass the reference to fuction in updater function(setter), without any currly braces.
  return <button onClick={() => setCounter(counter * 2)}>{counter}</button>;
}

ReactDOM.render(<Button />, document.getElementById("mountNode"));

// SearchParams.js
import { useState } from "react";

const ANIMALS = ["bird", "cat", "dog", "rabbit", "reptile"];

const SearchParams = () => {
  const [animal, updateAnimal] = useState("");
  const [location, updateLocation] = useState("Lahore, La");
  const [breed, updateBreed] = useState("");
  const breeds = [];

  return (
    <div className="search-params">
      <form>
        <label htmlFor="location">
          Location
          <input
            id="location"
            value={location}
            placeholder="Location"
            // onChange is special javascript event, we passing function defination to updater function(setter) not calling the function or function value, but actual function reference. this fucntion is accepting whole event, from that event we are getting the value and setting that value useing updateLocation function which will set that changed value captuered by that event, on that particual field.

            // in other words the line below will set the field to a value that triggered an event, onChange is a React Event, do a google search on react events.
            onChange={(e) => updateLocation(e.target.value)}
          />
        </label>
        <label htmlFor="animal">
          Animal
          <select
            id="animal"
            value={animal}
            onChange={(e) => updateAnimal(e.target.value)}
            onBlur={(e) => updateAnimal(e.target.value)}
          >
            <option />
            {ANIMALS.map((animal) => (
              <option key={animal} value={animal}>
                {animal}
              </option>
            ))}
          </select>
        </label>
        <label htmlFor="breed">
          Breed
          <select
            disabled={!breeds.length}
            id="breed"
            value={breed}
            onChange={(e) => updateBreed(e.target.value)}
            onBlur={(e) => updateBreed(e.target.value)}
          >
            <option />
            {breeds.map((breed) => (
              <option key={breed} value={breed}>
                {breed}
              </option>
            ))}
          </select>
        </label>
        <button>Submit</button>
      </form>
    </div>
  );
};

export default SearchParams;
Previous
Next