lien

Cours

fetch

   useEffect(() => {

    fetch("https://fakestoreapi.com/products/")

      .then((res) => res.json())

      .then((json) => {

        console.log(json);

        setProducts(json);

      });

  }, []);

 

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>

    </>

  );

}

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>

    </>

  );

}