Проблемы с сортировкой массива

Question

Есть некий набор информаци, представленный ввиде массива. Проблема заключается в его сортировке:

По имени, по алфавиту.
По возрасту, по возрастанию.

Укажите, пожалуйста, на ошибки и натолкните на решение данной проблемы.

P.S. Для кого-то это элементарно, но я самоучка.

const array = [
    {name: 'Alex', age: 24, someInfo: 'Lorem ipsum dolor sit amet'},
    {name: 'Edward', age: 27, someInfo: 'Sed malesuada massa id nunc dapibus'},
    {name: 'Caden', age: 40, someInfo: 'Donec euismod, risus sed feugiat euismod, nisl massa'},
    {name: 'Brom', age: 30, someInfo: 'Sed tincidunt mauris sit amet ex pulvinar'},
    {name: 'Din', age: 18, someInfo: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris'},
]

export default function Content() {
const [list, setList]= useState(array)
    const handleSort =(type) => {
    let draftList = [...list]
        switch (draftList) {
            case draftList: array.sort((a, b) => a.name.localeCompare(b.name));setList('name')
                break;
            case draftList: array.sort((a, b) => a.age - b.age);setList('age')
                break;
        }
    }
    return (
        <div>
            <ButtonGroup size="large" color="primary" aria-label="large outlined primary button group">
                <Button onClick={() => handleSort('name')}>BY NAME</Button>
                <Button onClick={() => handleSort('age')}>BY AGE</Button>
            </ButtonGroup>
            {array.map((Info) =>
            <SimpleCard CardInfo={Info}/>
            )}
        </div>
    );
}

Answer 1

Переделал немного код, но суть ты должен уловить. P.S Array - твой

function App(props){
  const [list, setList]= React.useState(array)
  const [sortBy, setSortBy] = React.useState('name')

  const handleSort = (type) => {
    let draftList = [...list]
    
    switch (type) {
        case 'name': 
              draftList.sort((a, b) => {
                if(a.name < b.name) return -1
                else if(a.name > b.name) return 1
                return 0
            } );
            break;
        case 'age': 
          draftList.sort((a, b) => a.age - b.age);
            break;
    }
    
    setSortBy(type)
    setList(draftList)
  }

  return (
    <div>
      <button className='sort' onClick={ () => handleSort( sortBy === 'name' ? 'age' : 'name' ) }>Sort by: {sortBy}</button>
      { list.map(({name, age, someInfo}) => {
        return (
          <div className='item' style={ { marginBottom: '10px' } }>
            <span className="name" style={ sortBy === 'name' ? { backgroundColor: 'green', color: 'white' } : {} }>{name}</span> 
            &nbsp;&nbsp;&nbsp;
            <span className='age' style={ sortBy === 'age' ? { backgroundColor: 'green', color: 'white' } : {} }>{age}</span>
            <div className='info'>{someInfo}</div>
          </div>
        )        
      }) }
    </div>
  )
}

БЛОГ НА HUSL

Проблемы с сортировкой массива

Ответы (1 шт):