Array.filter react

React filter array

import { useState } from "react"
2
3let numbers = [64, 84, 22, 32, 83, 65, 51, 26, 23, 56]
4function App() {
5  const [filteredNumbers, setFilteredNumbers] = useState(numbers)
6
7  const radioChangeHandler = e => {
8    const value = e.target.value
9    if (value === "even") {
10      setFilteredNumbers(
11        numbers.filter(number => {
12          if (number % 2 === 0) {
13            return true
14          }
15          return false
16        })
17      )
18    } else {
19      setFilteredNumbers(
20        numbers.filter(number => {
21          if (number % 2 !== 0) {
22            return true
23          }
24          return false
25        })
26      )
27    }
28  }
29
30  return (
31    <div className="App">
32      <h2>Number filtering</h2>
33      <input
34        type="radio"
35        name="evenOrOdd"
36        id="even"
37        value="even"
38        onChange={radioChangeHandler}
39      />
40      <label htmlFor="even">Even</label>
41      <input
42        type="radio"
43        name="evenOrOdd"
44        id="odd"
45        value="odd"
46        onChange={radioChangeHandler}
47      />
48      <label htmlFor="odd">Odd</label>
49      <ul>
50        {filteredNumbers.map(number => {
51          return <li key={number}>{number} </li>
52        })}
53      </ul>
54    </div>
55  )
56}
57
58export default App

-1

Source: codingdeft.com

Similar codes

9 votes153 views1 answer
Create react app in existing folder
Javascript React
0 vote143 views1 answer
Highcharts react hide data point dots
Javascript React
0 vote126 views1 answer
React native onChangeText resize the background image
Javascript React
0 vote132 views1 answer
Uploading profile pic with react.js node.js express.js REST API to sqlite DB
Javascript React
0 vote135 views2 answers
Hot reload problem react 17
Javascript React
2 votes97 views1 answer
Yarn create react-app test00h00m00s 0/0: : ERROR: [Errno 2] No such file or directory: 'create'
Javascript React
-2 votes148 views5 answers
React cheat sheet
Javascript React
0 vote149 views1 answer
How to use empty href link in reactjs
Javascript React
0 vote166 views1 answer
Props with ternary in react
Javascript React
0 vote148 views1 answer
Command reboot android app react native adb command
Javascript React