[FIXED] How to filter userid's todos in todoslist

Issue

I am practicing React now and I have a task that I am not sure how to do The main idea is to filter tasks in todos list when you type user ID I created another button and when you type user's id it will show exact user's tasks I did filter tasks as well just for practice, but don't know how to filter user's tasks when you type his id

upd: the problem seems like when you type something in input type becomes string, but I need number

import React from "react"
import {useState, useMemo, useEffect} from "react"

function App() {
  const [tasks, setTasks] = useState([])
  const [completed, setCompleted] = useState(false)
  const [title, setTitle] = useState("")
  const [userId, setUserId] = useState(1)

  const onToggleFilter = () => {
    setCompleted(!completed)
  }

  const onTitleChange = (event) => {
    setTitle(event.target.value)
  }

  const onUserChange = (event) => {
    setUserId(event.target.value)
  }

  let filteredTask = useMemo(() => {
    console.log("Filter by status")
    return tasks.filter((task) => task.completed === completed)
  }, [tasks, completed])
    

  //console.log("Rerender")

  if(title) {
    filteredTask = filteredTask.filter((task) => task.title.indexOf(title) >= 0)
  }

  if(userId) {
    filteredTask = filteredTask.filter((item) => item.userId === userId)
  }

  console.log(userId)

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/todos")
    .then(response => response.json())
    .then(todos => setTasks(todos))
  }, [])


  return(
    <div className="App">
      <h1>Task list</h1>
      <div>
        <button onClick={onToggleFilter}>
          {
            completed ? "Show tasks in work" : "Show completed tasks"
          }
        </button>
        <br/>
        <br/>
        <input onChange={onTitleChange}/>
        <input onChange={onUserChange}/>
        <br/>
        <br/>
        {
          filteredTask.map((task) => <div key={task.id}>{task.title}</div>)
        }
      </div>
      </div>
  )
}

export default App

Solution

Use parseInt to convert string to number.

const onUserChange = (event) => {
  setUserId(parseInt(event.target.value))
}

Answered By - twharmon
Answer Checked By - - David Marino (ReactFix Volunteer)