filter된 학생 리스트가 표시되지 않습니다.

[kmsgm]

StudentList.js 파일에서 search = true이면 검색값이 nameKey, gradeKey를 가지고 필터링을 한 후에 return 하도록 했습니다. 콘솔로 찍어보니 필터링은 잘 되는데 화면에 필터링 된 리스트가 출력되지 않아 뭐가 문제인지 모르겠습니다.

StudentSection.js 에서 input을 받고 검색 버튼을 누르면 url을 변경하고, 하위 파일인 StudentList.js에서 필터링 된 리스트를 출력하도록 했습니다. 근데 뭔가 문제가 많은 것 같아서 이런 방식으로 구현하는게 아닌 것 같다는 느낌이 드네요... 버튼을 누르는 동작 함수 안에서 필터링이 다 된 후에 StudentList로 넘겨주는 식으로 해야 할까요?

useEffect(() => {
        fetchData(); // 학생 데이터 불러오기
    }, []);


const filterList = () => {
        const studentsUpdate = studentList.filter((student) => {
            const filterName = student.name.includes(nameKey);
            const filterGrade = student.grade === Number(gradeKey);
            return filterName && filterGrade;
        });
        return studentsUpdate.map((student) => {
            <Student key={student.id} student={student} />;
        });
    };

    return (
        <section className="student-list">
            {/* 학생 테이블의 학생 리스트 */}
            {studentList.length > 0 ? (
                <>
                    {search
                        ? filterList()  // 출력 안됨
                        : studentList.map((student) => (
                              <Student key={student.id} student={student} />
                          ))}
                </>
            ) : (
            )}
        </section>
    );
}

[woohm402]

filterList의 map 함수에서 화살표 함수 사용하실 때 실수하신 것 같습니다. (참고할 만한 글)

[1, 2, 3].map(item => ( <h1>{item}</h1> )) // [<h1>1</h1>, <h1>2</h1>, <h1>3</h1>]

[1, 2, 3].map(item => { <h1>{item}</h1> }) // [undefined, undefined, undefined]

---

여담이지만 그 실수를 하면 IDE별로 아래처럼 뜨는데

webstorm	vscode
경고 보여줌	경고 없음

좋은 IDE를 사용하면 삽질하는 시간이 반으로 줄어듭니다 :) 웹스톰 최고

vscode는 기본적으로 메모장같은 친구라 익스텐션 충분히 설치하셔야 자바스크립트 IDE로 좀 쓸만하실 거예요

[kmsgm]

아앗...넵 감사합니다! 문제 해결했습니다!!