Break SearchBar Up Into 2 Components

[modimo]

I am trying to separate my SearchBar and my list component I call StudentList but I have a hard time trying to do that because of the filter. What can I do?

//SearchBar Component
const SearchBar = () => {


   const [term, setTerm] = useState('');

   const [students] = useRenderStu([]);


   const filterStudents = () => {
      const filteredList = students.filter((val) => {
          if (term === '') {
               return val;
          } else if (val.firstName.toLowerCase().includes(term.toLowerCase())) {
               return val;
          } else if (val.lastName.toLowerCase().includes(term.toLowerCase())) {
               return val;
          }
      }).map((val) => {

         const avg = val.grades.reduce((sum, curr) => sum + Number(curr), 0) /
         val.grades.length;

         const getStudentGrades = () => {
             
             return (
                <ul class='grade-list'>
                <li class="testOne"><div class="one">Test1: </div>{`${val.grades[0]}%`}</li>
                <li class="testTwo"><div class="two">Test2: </div>{`${val.grades[1]}%`}</li>
                <li class="testThree"><div class="three">Test3: </div>{`${val.grades[2]}%`}</li>
                <li class="testFour"><div class="four">Test4: </div>{`${val.grades[3]}%`}</li>
                <li class="testFive"><div class="five">Test5: </div>{`${val.grades[4]}%`}</li>
                <li class="testSix"><div class="six">Test6: </div>{`${val.grades[5]}%`}</li>
                <li class="testSev"><div class="seven">Test7: </div>{`${val.grades[6]}%`}</li>
                </ul>
             );
         }
          

          return (

            <div class="all-ui">
            <div class="student-list">
            <img class="image" key={val.id} src={val.pic} alt={"no pic"}/>
            <div class="text-info">
            <ul class="text-list" key="2">
            <div class="w3-container">
            </div>
            <li class="name" key="3">{val.firstName.toUpperCase()} {val.lastName.toUpperCase()}</li>
            <div class="other-info" key="4">
            <li class="email" key="5">{`Email: ${val.email}`}</li>
            <li class="company" key="6">{`Company: ${val.company}`}</li>
            <li class="skill" key="7">{`Skill: ${val.skill}`}</li>
            <li class="average" key="8">{`Average grade: ${avg}%`}</li>
            <Collapsable data={getStudentGrades()}/>
            <NewTag/>
            </div>
            </ul>
            </div>
            </div>
            <hr class="line"/>
            </div>
        )
    });
    return filteredList;
}


   return (
   <div class="searchB">
   <div class="theInput">
   <input className="inpS" type="text" size="160" 
   value={term} onChange={(e) => setTerm(e.target.value)}/>
   <TagSearchBar/>
   </div>
   {filterStudents()}
   </div>
    );
}

//StudentList Component
const StudentList = () => {

    const [students] = useRenderStu([]);

    const studentList = students.map((val) => {

        const avg = val.grades.reduce((sum, curr) => sum + Number(curr), 0) /
        val.grades.length;

        const getStudentGrades = () => {
            
            return (
               <ul class='grade-list'>
               <li class="testOne"><div class="one">Test1: </div>{`${val.grades[0]}%`}</li>
               <li class="testTwo"><div class="two">Test2: </div>{`${val.grades[1]}%`}</li>
               <li class="testThree"><div class="three">Test3: </div>{`${val.grades[2]}%`}</li>
               <li class="testFour"><div class="four">Test4: </div>{`${val.grades[3]}%`}</li>
               <li class="testFive"><div class="five">Test5: </div>{`${val.grades[4]}%`}</li>
               <li class="testSix"><div class="six">Test6: </div>{`${val.grades[5]}%`}</li>
               <li class="testSev"><div class="seven">Test7: </div>{`${val.grades[6]}%`}</li>
               </ul>
            );
        }
         

         return (

           <div class="all-ui">
           <div class="student-list">
           <img class="image" key={val.id} src={val.pic} alt={"no pic"}/>
           <div class="text-info">
           <ul class="text-list" key="2">
           <div class="w3-container">
           </div>
           <li class="name" key="3">{val.firstName.toUpperCase()} {val.lastName.toUpperCase()}</li>
           <div class="other-info" key="4">
           <li class="email" key="5">{`Email: ${val.email}`}</li>
           <li class="company" key="6">{`Company: ${val.company}`}</li>
           <li class="skill" key="7">{`Skill: ${val.skill}`}</li>
           <li class="average" key="8">{`Average grade: ${avg}%`}</li>
           <Collapsable data={getStudentGrades()}/>
           <NewTag/>
           </div>
           </ul>
           </div>
           </div>
           <hr class="line"/>
           </div>
       )
   });
   return studentList;
}

[miku86]

Hey there,
I think both of your components do way too much, the complexity is too high.

I would go one step back and try to understand the bigger picture: https://reactjs.org/docs/thinking-in-react.html

[modimo]

I was thinking I could also break the list into another component known as StudentItems but I am kind of confused on how to do that.