Move Item Up And Down

Move Item Up And Down

Medium ReactJS State Management 33 views
Explanation Complexity

Problem Statement

Render a list and add Up/Down buttons to reorder items.

Input Format

No input.

Output Format

Render a React component.

Constraints

Update the array immutably by swapping indexes.

Input / Output Format

Input Format
No input.
Output Format
Render a React component.
Constraints
Update the array immutably by swapping indexes.

Examples

Input:
Output:
(React code)

Example Solution (Public)

ReactJS 
import React, { useState } from 'react';

export default function App() {
  const [items, setItems] = useState(['HTML', 'CSS', 'React', 'PHP']);

  function swap(i, j) {
    setItems((prev) => {
      const next = [...prev];
      const tmp = next[i];
      next[i] = next[j];
      next[j] = tmp;
      return next;
    });
  }

  return (
    <div style={{ padding: 16, width: 420 }}>
      <h2 style={{ marginTop: 0 }}>meetcode order</h2>
      <ol style={{ paddingLeft: 18 }}>
        {items.map((name, idx) => (
          <li key={name} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 10, padding: '6px 0' }}>
            <span>{name}</span>
            <span style={{ display: 'inline-flex', gap: 8 }}>
              <button type='button' disabled={idx === 0} onClick={() => swap(idx, idx - 1)} style={{ padding: '6px 10px', borderRadius: 12, border: '1px solid #ddd', background: '#fff', opacity: idx === 0 ? 0.6 : 1 }}>Up</button>
              <button type='button' disabled={idx === items.length - 1} onClick={() => swap(idx, idx + 1)} style={{ padding: '6px 10px', borderRadius: 12, border: '1px solid #ddd', background: '#fff', opacity: idx === items.length - 1 ? 0.6 : 1 }}>Down</button>
            </span>
          </li>
        ))}
      </ol>
    </div>
  );
}

Official Solution Code

import React, { useState } from 'react';

export default function App() {
  const [items, setItems] = useState(['HTML', 'CSS', 'React', 'PHP']);

  function swap(i, j) {
    setItems((prev) => {
      const next = [...prev];
      const tmp = next[i];
      next[i] = next[j];
      next[j] = tmp;
      return next;
    });
  }

  return (
    <div style={{ padding: 16, width: 420 }}>
      <h2 style={{ marginTop: 0 }}>meetcode order</h2>
      <ol style={{ paddingLeft: 18 }}>
        {items.map((name, idx) => (
          <li key={name} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 10, padding: '6px 0' }}>
            <span>{name}</span>
            <span style={{ display: 'inline-flex', gap: 8 }}>
              <button type='button' disabled={idx === 0} onClick={() => swap(idx, idx - 1)} style={{ padding: '6px 10px', borderRadius: 12, border: '1px solid #ddd', background: '#fff', opacity: idx === 0 ? 0.6 : 1 }}>Up</button>
              <button type='button' disabled={idx === items.length - 1} onClick={() => swap(idx, idx + 1)} style={{ padding: '6px 10px', borderRadius: 12, border: '1px solid #ddd', background: '#fff', opacity: idx === items.length - 1 ? 0.6 : 1 }}>Down</button>
            </span>
          </li>
        ))}
      </ol>
    </div>
  );
}
Please login to submit solutions.
Editor
Output

                                        

                                    

                                    

                                        

                                                                                    
Please login to submit solutions.