如何使用反应通过搜索操作滚动到列表中的项目？

Question

So, I made a react app that displays a list of items from a json file as in the pic. I want to implement a search feature where i can enter the name and it checks for the name in list and scrolls to it.

A person told me about scroll-into-view , but I'm not understand how to make it compare the search term to the names in list.

My App.js code

import React,{useState} from 'react';
import Notes from './Notes';
import './App.css';

function App() {

  const [notes] = useState([]);
  const handleSubmit= ()=>{
      //Upon submitting I want the search functionality to be implemented here . If thats the way to do it.
  }

  return (
    <div className="App">

      <div className="App-header">  
        <form><input type="text" placeholder="Start Typing.." onSubmit={handleSubmit} ></input></form>
        <div className="pageTitle">Song Notes :</div> 
        <Notes thisNotes={notes}/>   
      </div>

    </div>
  );
  }

export default App;

My Notes.js code:

import React from 'react';
const Notes = ({notes})=>{
    const jsonNotes = require('./Notes.json');
    const songNotes = jsonNotes.map(note => {
        return(
            <div key={note.id}>
            <li class="noteAsList">

            <div className="songTitle">{note.Name}</div>

            <pre><br></br>{note.Notes}</pre>
            </li>
            </div>
        )
    })

    return(
        <div className="noteStyle">
          {songNotes} 
        </div>
    )
}

export default Notes;

I'm looking to implement such a feature . Either scrolling into view in the page or just displaying the item I asked for.

Thanks for the help in advance.

Answer 1

Codesandbox
My App.js code

import React, { useState } from "react";
import Notes from "./Notes";
import "./App.css";

const jsonNotes = require("./Notes.json");

const App = () => {
  const [notes] = useState([]);
  const handleSubmit = event => {
    if (event.key === "Enter") {
      console.log(event.target.value);
      const obj = jsonNotes.find(item => item.Name === event.target.value);
      const el = document.getElementById(obj.id);
      if (el)
        el.scrollIntoView({
          behavior: "smooth",
          block: "start",
          inline: "center"
        });
    }
  };

  return (
    <div className="App">
      <div className="App-header">
        <input
          type="text"
          placeholder="Start Typing.."
          onKeyPress={handleSubmit}
        />
        <div className="pageTitle">Song Notes :</div>
        <Notes thisNotes={notes} />
      </div>
    </div>
  );
};

export default App;

My Notes.js code:

import React from "react";
const jsonNotes = require("./Notes.json");

const Notes = ({ notes }) => {
  const songNotes = jsonNotes.map(note => {
    return (
      <div id={note.id} key={note.id}>
        <li className="noteAsList">
          <div className="songTitle">{note.Name}</div>
          <pre>
            <br />
            {note.Notes}
          </pre>
        </li>
      </div>
    );
  });

  return <div className="noteStyle">{songNotes}</div>;
};

export default Notes;