score:1
the problem is student
state gets updated every time the <input>
changes.
note that filtering results into a derived data coming from the original data.
thus, no need to store the filtered/derived results as a state.
rather, you need to have another state for the text used for filtering.
const [student, setstudent] = usestate([]);
const [filter, setfilter] = usestate(""); // state for the text filter
<input
placeholder="search by name"
type="text"
classname="filter-students"
onchange={(e) => setfilter(e.target.value)}
/>
{students
.filter((name) => name.firstname.tolowercase().includes(filter)) // use filter state
.map(/* add elements here */)
}
score:1
don't filter your state and save it back over itself, this doesn't allow you to get back to your original state. instead, use a separate piece of state to save the filter value and filter in-line when rendering state so you can keep your student
data intact and unmutated by filtering.
function app() {
const [student, setstudent] = usestate([]);
const [filtervalue, setfiltervalue] = usestate(""); // <-- filter state
return (
<>
<input
placeholder="search by name"
type="text"
classname="filter-students"
onchange={(e) => setfiltervalue(e.target.value)} // <-- update filter state
/>
{student
.filter((name) => { // <-- filter inline
return name.firstname.tolowercase().includes(e.target.value);
})
.map((students) => {
let total = 0;
for (let i = 0; i < students.grades.length; i++) {
total += parseint(students.grades[i]);
}
const average = total / students.grades.length;
console.log(average);
return (
<ul classname="student-container">
<img classname="student-img" src={students.pic} />
<div classname="student-column">
<li classname="student-item">
{" "}
{students.firstname} {students.lastname}
</li>
<li classname="student-item">email: {students.email}</li>
<li classname="student-item">company: {students.company}</li>
<li classname="student-item">skill: {students.skill}</li>
<li classname="student-item">average: {average}%</li>
</div>
</ul>
);
})}
</>
);
}
Source: stackoverflow.com
Related Query
- filtering array based on each letter from input
- How to generate an array for each input value from textBox in reactJs
- ReactJs hook reducer filtering through array based off user string input
- How do I filter the data based on search input from array of objects in React, ES6
- return value from array index value based on input
- How i can create/Update array based on user entered answer and linked question id from on change event of dynamic input in react.js
- FIRESTORE: Is there a work around for 'in' query for filtering data from a collection based on an array list?
- Filter Array of Objects based on input field in React
- Need Get to element based on consecutive object property or properties from array of object i have a value to search
- Return a filtered array based on user input javascript
- How can I show certain elements from an array based on a React State?
- Refresh a React Child Functional Component based on Async input from Parent
- React - filtering items from an array in any order
- How delete an object based on its index from a nested array in React?
- filtering an array of objects based on a contained arrays contents. Vanilla JS, lodash, some other react releated technology?
- In Javascript, replace forEach that involves filtering the same array of objects each time through loop with a left join
- Filter array of objects based on the input passed: Javascript
- React-Redux: How to add each item from array
- Add value from input into array is not working in React
- JavaScript array filtering based on any combination of properties
- how can i setState inside of array of objects taking user input from form
- Fetching the input value from textarea in a loop from an array of objects using reactjs. How to do so?
- How to push multiple items to an array based on checked value from multiple checkbox list?
- Retrieving Array from API and filtering through in React
- When creating buttons for each item in an array in React, how do I pass in unique onClick parameters based on the array value?
- React: Render repeating elements from a child array based on the URL
- ReactJS | Prevent state array from updating on input field change
- Convert values from input box from a string into an array using react-hook-form
- How to change each value from an array inside an array of objects?
- .setState(): Filtering a person from an array of objects on button click
More Query from same tag
- object returned from useHooks() passed as props not re-rendering child component after handleDelete from a list of members
- Pushing dynamic state update in a child component to a parent component
- Resolve React Lazy Components for React Router test
- Why do I need to wrap React/Enzyme state changes in act?
- Can I mutate state passed to setState function?
- How to enable prop-types in production for a React Storybook for the Docs addon
- Render "outlined" input when using react-text-mask with Material-UI inputs
- Context data does not get passed into nested component: React+Typescript+ContextAPI
- Unknown at rule @tailwind CSS in reactjs
- How to filter items in a list with ReactJS and Redux?
- How to dispatch action from a child window?
- React FormData not giving image
- How to record web/browser audio output (not microphone audio)
- Failed because this element is being covered by another element (invisible Iframe)
- How to manage react state for a list of JSX.Elements correctly
- React Bootstrap using EmailJs show toast/modal on successful sent
- media query screen height not functioning for image
- GraphQL - sort error - Unknown argument "sort"
- Communicate up component's initial state without useEffect warning
- How to show snackbar on request success, failure in Redux?
- Handling "Page not found" using React Router
- URL is replaced but component doesn't refresh
- React hook form with redux and async request
- React enzyme not able to test click funtion
- Unhandled rejection using setState in .map loop
- React autofocus input after enabling a disabled input
- How to post a file to a web api from reactjs With react-adal, not Axios
- React responsive Navbar
- Redux with React - right way to share the store with components
- Where do these styles come from in reactjs examples on codepen?