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>
    </>
  );
}
at