dupontReact

jeudi 29 août 2024

lien

mercredi 26 juin 2024

fetch

useEffect(() => {

    fetch("https://fakestoreapi.com/products/")
      .then((res) => res.json())
      .then((json) => {
        console.log(json);
        setProducts(json);
      });
  }, []);

mardi 4 juin 2024

lundi 27 mai 2024

usestate

import { useState } from "react";

function SearchBar({ searchText, onSearchTextChange }) {
  return (
    <form>
      <input
        type="text"
        value={searchText}
        placeholder="Search..."
        onChange={(e) => onSearchTextChange(e.target.value)}
      />
    </form>
  );
}

export default function App() {
  const [searchText, setSearchText] = useState("");

  return (
    <>
      <SearchBar searchText={searchText} onSearchTextChange={setSearchText} />
      <p>{searchText}</p>
    </>
  );
}

jeudi 23 mai 2024

State : paramétre

import { useState } from "react";

function SearchBar({ inputValue, onInputChange }) {
  return (
    <form>
      <input
        type="text"
        value={inputValue}
        placeholder="..."
        onChange={(e) => onInputChange(e.target.value)}
      />
    </form>
  );
}

export default function App() {
  const [filterText, setFilterText] = useState("");

  const handleInputChange = (newFilterText) => {
    setFilterText(newFilterText);
  };

  return (
    <>
      <SearchBar inputValue={filterText} onInputChange={handleInputChange} />
      <p>{filterText}</p>
    </>
  );
}

import { useState } from "react";

function SearchBar({ filterTextValue, onFilterTextChange }) {
  return (
    <form>
      <input
        type="text"
        value={filterTextValue}
        placeholder="..."
        onChange={(e) => onFilterTextChange(e.target.value)}
      />
    </form>
  );
}

export default function App() {
  const [filterText, setFilterText] = useState("");

  const handleFilterTextChange = (newFilterText) => {
    setFilterText(newFilterText);
  };

  return (
    <>
      <SearchBar
        filterTextValue={filterText}
        onFilterTextChange={handleFilterTextChange}
      />
      <p>{filterText}</p>
    </>
  );
}