본문 바로가기
Research/React

React 배열 렌더링하기

by RIEM 2023. 10. 18.

// Rendering lists
import './App.css';

const students = [
  { name: 'John', height: 188, id: 'stu1' },
  { name: 'Sujan', height: 158, id: 'stu2' },
  { name: 'Rabo', height: 168, id: 'stu3' },
];

function App() {
  const listStudents = students.map((student) => {
    return (
      <li
        key={student.id}
        style={{ color: student.height > 170 ? 'red' : 'green' }}
      >
        {}
        {student.name}
      </li>
    );
  });

  return <ul>{listStudents}</ul>;
}

export default App;

댓글