Displaying entries of input data

Question

Displaying entries of input data

I have an application that includes a modal window with filters, but I am looking to add another type of filter. However, I am struggling with implementing it in React and would appreciate any help with the code or recommended links.

Essentially, I want to allow users to input their own values into a line within the filters, press Enter, and see the entered result displayed (users should be able to enter multiple values for filtering purposes).

If my explanation seems confusing, I can also provide a screenshot illustrating the desired outcome:

https://i.stack.imgur.com/YpmnS.png

javascript reactjs filter

Answer 1

Answer №1

To enhance the user interface, consider utilizing a custom input field like the one demonstrated here: .

For incorporating this functionality into your project:

const list =  [2,3,4,56,7,8,12,34,0,1]
const searchedItems =  [3,7,8]
const finalList= [];
function searchItems() {
   list.forEach(item => {
     searchedItems.forEach(ele => {
       if(ele===item) finalList.push(item);
   })
  });
  return finalList;
}
console.log(searchItems())

Don't forget to integrate this array with your search item results for a seamless user experience.

Answer 2

To enhance the user interface, consider utilizing a custom input field like the one demonstrated here: .

For incorporating this functionality into your project:

const list =  [2,3,4,56,7,8,12,34,0,1]
const searchedItems =  [3,7,8]
const finalList= [];
function searchItems() {
   list.forEach(item => {
     searchedItems.forEach(ele => {
       if(ele===item) finalList.push(item);
   })
  });
  return finalList;
}
console.log(searchItems())

Don't forget to integrate this array with your search item results for a seamless user experience.

Answer 3

Answer №2

export function ListItem({ itemValue }) {
  return (
    <div className="item">
      <span className="itemValue">{itemValue}</span>
    </div>
  );
}

export default function App() {
  const [itemList, setListItem] = useState([]);
  const [item, setItem] = useState("");
  const addValue = (event) => {
    setItem(event.target.value);
  };
  const listenEnter = (event) => {
    if (event.key === "Enter" && event.target.value !== "") {
      setListItem([...itemList, item]);
      setItem("");
    }
  };
  return (
    <div className="App">
      <input
        className="inputElement"
        placeholder="Enter Value"
        value={item}
        onChange={addValue}
        onKeyUp={listenEnter}
      />
      <div className="itemList">
        {itemList.map((item) => (
          <ListItem itemValue={item} />
        ))}
      </div>
    </div>
  );
}

Original code available at this link

Answer 4

export function ListItem({ itemValue }) {
  return (
    <div className="item">
      <span className="itemValue">{itemValue}</span>
    </div>
  );
}

export default function App() {
  const [itemList, setListItem] = useState([]);
  const [item, setItem] = useState("");
  const addValue = (event) => {
    setItem(event.target.value);
  };
  const listenEnter = (event) => {
    if (event.key === "Enter" && event.target.value !== "") {
      setListItem([...itemList, item]);
      setItem("");
    }
  };
  return (
    <div className="App">
      <input
        className="inputElement"
        placeholder="Enter Value"
        value={item}
        onChange={addValue}
        onKeyUp={listenEnter}
      />
      <div className="itemList">
        {itemList.map((item) => (
          <ListItem itemValue={item} />
        ))}
      </div>
    </div>
  );
}

Original code available at this link

Displaying entries of input data

Answer №1

Answer №2

Similar questions

The issue lies with the React router not functioning properly when handling root

Ensuring that a Box retains its visual appeal even as the screen size fluctuates within MaterialUI in ReactJS

react-oidc-context automatically redirects to the original route upon successful login using Auth0

There seems to be a hiccup in the JavaScript Console. It could potentially impact the functionality

Develop a Modal Form using Bootstrap (HTML)

Are there any solutions for the malfunctioning v8 date parser?

What is the best way to dynamically assign a value to an anchor tag upon each click using jQuery?

The elastic image slideshow maintains the original size of the images and does not resize them

Click on the link or tab to update the marker location on the Google Map

Is it possible to integrate ng-repeat with ng-model in Angular?

What strategies can I implement to keep my Nextjs App logged in?

Uploading with Javascript CORS consistently ends with an error event occurring

Is the condition failing to evaluate for all td elements?

"Unable to execute validateOptions as it is not a recognized function

Creating a responsive Material UI Container Component is imperative for ensuring a user

Using the POST method in Node.js is not functioning properly on the Replit server when using express

Using e.preventDefault in my code is causing obstacles when I try to conduct unit testing with En

"Enhance your website with a dynamic Jssor slider featuring nested slides and vertical

"Initiate React app with specific port number using the Command Line Interface

What is the best approach to updating multiple rows instead of just the first row using the update button located on both sides using PHP and AJAX?