[기능] list-item 구조에서 유효 데이터를 가진 첫번째 아이템을 찾아 펼침 상태로 초기화하기

소개

오늘은 list-item 구조에서 유효 데이터가 있는 첫번째 아이템 펼침 기능(toggle)을 구현해 보도록 하겠습니다.  

---

코드구현

// StatusList 파일

import { useMemo } from 'react';

import StudentItem from './StudentItem';

function StatusList(props) {
  const { list } = props;

  // validId를 가진 첫번째 학생의 인덱스 찾기
  const indexOfFirstValidStudent = useMemo(() => {
	return list.findIndex((item) => item.validId)
  }, [list]);

  return (
    <ul>
      {list.map((student, index) => {
        return (
          <StudentStatusItem
            key={index}
            student={student}
            isFirstValidStudent={indexOfFirstValidStudent === index}
          />
        );
      })}
    </ul>
  );
}

export default StatusList;

 

//StudentItem 파일

import { useState, useCallback } from 'react';

function StudentItem({student,isFirstValidStudent}){

	const [toggle,setToggle]=useState(isFirstValidStudent? true: false);
    
 	const handleToggle = useCallback(() => {
    	setToggle((prev) => !prev);
  	}, []);
	
    return (
        <li> 
            <div>{student.name}</div>
            {toggle &&  <div>{student.validId}</div> } 
            <button onClick={handleToggle}>토글</button>
        </li>
    )
}

 

 

---

구현결과 (초기상태)

ex) 가지원(validId : null)/ 나지원(validId : null)/ 다지원(validId : 123123)

 

가지원

나지원

다지원 123123

 

---

ex) 가지원(validId : 123)/ 나지원(validId : 234)/ 다지원(validId :123123)

가지원 123

나지원

다지원

 

---

ex) 가지원(validId : null)/ 나지원(validId : null)/ 다지원(validId : null)

 

가지원

나지원

다지원