Coding Challenge Practice - Question 1

Today's Question: Create a React application that displays a list of items and allows users to add new items. The input field should not be submitted if it is empty, duplicate items cannot be added, and the field clears after submission. Solution My approach to solving this was to first write down each step that I was going to carry out while writing the code Create an input field Add a button The button should have a function that: adds the content of the input to a list below Resets the input field after adding an item Checks if the item being added has been added previously. It is important to note that this question was obtained from an online test platform which provided a boilerplate code. So I had this to start with: import { useState } from "react"; import "h8k-components"; import "./App.css"; function App() { const [items, setItems] = useState([]); const [input, setInput] = useState(""); const handleAddItem = () => { // TODO: Add logic to add input to items list }; return ( Item List setInput(e.target.value)} placeholder="Enter item" data-testid="input-field" /> Add Item {items.map((item, index) => ( {item} ))} ); } export default App; As a result, steps 1 and 2 have been done, and all I had to do was implement the logic. The first step was to prevent submitting an empty field const trimmedInput = input.trim(); if(!trimmedInput) return; The trim method is used to prevent the addition of unnecessary spaces. In this case, adding " Buy food" would be treated as a duplicate if "Buy food" already exists. Then the "if" statement was used to check if the input field is empty after the spaces have been removed. The next step was to check if the item I was adding already existed if(items.includes(trimmedInput)){ alert('This task has been added!'); return; } The includes method is used to perform a case-sensitive search to determine if a string is contained within another string, returning true or false. The final step is to add the item if both conditions are met earlier. setItems([...items, trimmedInput]); setInput(''); The setItems is used to update the previous state (items) of the array. So we add what was in the array before using the spread operator(...items), and then we add the new item (trimmedInput). The setInput is used to reset the input state back to an empty string(''). The final solution import { useState } from "react"; import "h8k-components"; import "./App.css"; function App() { const [items, setItems] = useState([]); const [input, setInput] = useState(""); const handleAddItem = () => { // TODO: Add logic to add input to items list const trimmedInput = input.trim(); if(!trimmedInput) return; if(items.includes(trimmedInput)){ alert('This task has been added!'); return; } setItems([...items, trimmedInput]); 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; That's all folks!

May 5, 2025 - 00:27

Today's Question:
Create a React application that displays a list of items and allows users to add new items. The input field should not be submitted if it is empty, duplicate items cannot be added, and the field clears after submission.

Solution
My approach to solving this was to first write down each step that I was going to carry out while writing the code

Create an input field
Add a button
The button should have a function that:

adds the content of the input to a list below
Resets the input field after adding an item
Checks if the item being added has been added previously.

It is important to note that this question was obtained from an online test platform which provided a boilerplate code. So I had this to start with:

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

import "./App.css";

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

  const handleAddItem = () => {
    // TODO: Add logic to add input to items list
  };

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

export default App;

As a result, steps 1 and 2 have been done, and all I had to do was implement the logic. The first step was to prevent submitting an empty field

const trimmedInput = input.trim();

if(!trimmedInput) return;

The trim method is used to prevent the addition of unnecessary spaces. In this case, adding " Buy food" would be treated as a duplicate if "Buy food" already exists. Then the "if" statement was used to check if the input field is empty after the spaces have been removed.

The next step was to check if the item I was adding already existed

if(items.includes(trimmedInput)){
     alert('This task has been added!');
     return;
  }

The includes method is used to perform a case-sensitive search to determine if a string is contained within another string, returning true or false.

The final step is to add the item if both conditions are met earlier.

setItems([...items, trimmedInput]);
setInput('');

The setItems is used to update the previous state (items) of the array. So we add what was in the array before using the spread operator(...items), and then we add the new item (trimmedInput). The setInput is used to reset the input state back to an empty string('').

The final solution

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

import "./App.css";

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

  const handleAddItem = () => {
    // TODO: Add logic to add input to items list

    const trimmedInput = input.trim();

    if(!trimmedInput) return;

    if(items.includes(trimmedInput)){
            alert('This task has been added!');
            return;
        }
    setItems([...items, trimmedInput]);
    setInput('');
  };

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

export default App;

That's all folks!