We use cookies to ensure you have the best browsing experience on our website. Please read our cookie policy for more information about how we use cookies.
  1. Prepare
  2. React
  3. Components
  4. Item List Manager
  5. Discussions

Item List Manager

Sort by

recency

|

23 Discussions

|

  • sankarsingampal1
     + 0 comments

    import { useState } from "react"; import "h8k-components";

    import "./App.css";

    function App() { const [items, setItems] = useState([]); const [input, setInput] = useState("");

    const handleAddItem = () => { if(input === "") return; setItems([...items, input]); setInput(""); };

    return ( <>

    Item List

    setInput(e.target.value)} placeholder="Enter item" data-testid="input-field" /> Add Item {items.map((item, index) => ( {item} ))} ); }

    export default App;

  • Sid_Tutai95
     + 0 comments

    The main logic is in this particular method only, just 2 lines of code changes required.

    **const handleAddItem = () => { // TODO: Add logic to add input to items list if (input !== "") { setItems((prevItem) => [...prevItem, input]); setInput(""); }

    };**

  • mr_johnmichael44
     + 0 comments

    import React, { useState } from "react";

    function ItemListManager() { const [items, setItems] = useState([]); const [inputValue, setInputValue] = useState("");

    const handleAddItem = () => { if (inputValue.trim() === "") return; // Prevent adding empty items setItems([...items, inputValue]); setInputValue(""); };

    return (

    Item List Manager

    setInputValue(e.target.value)} /> Add Item

      <ul>
    {items.map((item, index) => (
      <li key={index}>{item}</li>
    ))}
  </ul>
</div>

    ); }

    export default ItemListManager; How it works

    Uses useState to manage both the list of items and the input field value.

    Adds a new item only if the input is not empty.

    Clears the input after successfully adding an item.

  • safei_ashraf
     + 0 comments
      const handleAddItem = () => {
    if(!!input.trim()?.length){ // checks on valid input with the !! operator (length > 0) & not empty space
      setItems( items => [...items,input]); // Creates copy of the state, then updates it without mutating the old state directly, this is best practice in react
      setInput(''); // reset the input value
    }
  };

BONUS
        {/* // Additionaly disable the button if there is no valid input */}
        <button onClick={handleAddItem} data-testid="add-button" disabled={!input.trim().length}> 
BONUS

  • lokhilkishan60
     + 1 comment
     const handleAddItem = () => {
    setItems(items, items.push(input))
    setInput("")
    console.log(items);
  };