<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/babel">
const { useState } = React;
const [schoolData, setSchoolData] = useState([
{ id: 1, schools: ["Harvard University", "Stanford University"] },
{ id: 2, schools: ["Massachusetts Institute of Technology"] },
{ id: 3, schools: ["University of California, Berkeley", "University of Texas at Austin"] },
{ id: 5, schools: ["California Institute of Technology", "Columbia University"] },
{ id: 7, schools: ["Cornell University", "University of Pennsylvania,University of Chicago", "Princeton University", "Yale University"] },
{ id: 8, schools: ["Duke University", "Northwestern University"] },
{ id: 9, schools: ["University of Michigan, Ann Arbor"] },
{ id: 10, schools: ["University of California, Los Angeles", "University of Florida"] },
// Add more objects with nested arrays of schools here
const sortSchoolsByLength = () => {
const sortedSchoolData = [...schoolData].sort(
(a, b) => a.schools.length - b.schools.length
setSchoolData(sortedSchoolData);
<div className='container'>
<h3>ReactJs Sort An Array Of Objects By The Length Of A Nested Array</h3>
<button className='sort-button' onClick={sortSchoolsByLength}>Sort by School Length</button>
<ul className='school-list'>
{schoolData.map((item) => (
<li key={item.id} className='school-item'>{item.id} {item.schools.join(', ')}</li>
ReactDOM.render(<App />, document.getElementById("app"));
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
background-color: #0074d9;
background-color: #0056b3;
background-color: #f0f0f0;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
transition: background-color 0.3s ease;
background-color: #e0e0e0;