How do I scroll into a item in a list by search operation using react?

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.

Jay · Accepted Answer · 2020-02-20 12:23:52Z

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;

edited Feb 20, 2020 at 12:23

answered Feb 20, 2020 at 8:33

Jay

3,1392 gold badges16 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

15 Comments

harikrishnan Over a year ago

Just by copy pasting your code I get this const el = document.getElementById(id); Then by changing the const el = document.getElementById(id); to const el = document.getElementById(notes.id); I get rid of the error , but it does not function. My json format is this way though : [ { "id": 0, "Name": "YamunaiAatrile_DhaLapathi", "Notes" : " All the notes here " }, ]

Jay Over a year ago

@harikrishnan id means your element id, that we have set in div

harikrishnan Over a year ago

I'm more confused now. Could you tell me what id should I be giving there? I'm sorry but its confusing me. I understanding you are telling the id given to div .. which is usually given as id="idName" . But in this context , what do I use?

Jay Over a year ago

@harikrishnan can you please create a codesandbox and share here i will fix there, please all files means all ja and json files

harikrishnan Over a year ago

Yes sure. I'm sorry for not being able to understand what you say. I'll create a sandbox now

|

Collectives™ on Stack Overflow

How do I scroll into a item in a list by search operation using react?

1 Answer 1

15 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

15 Comments

Your Answer

Sign up or log in

Post as a guest

Related