ReactJS Program to Move Item Up And Down with Explanation
ReactJS
Medium
State Management
32 views
1 min read
88 words
This problem helps you practice core ReactJS fundamentals in a practical way. It builds intuition around item, down, render. Let’s break it down step by step so you can implement it confidently.
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.
Code Solution
This explanation is written for learning purposes and to help beginners understand the concept clearly.
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>
);
}
Output Example
No sample I/O is provided for this question.
Common Mistakes
- Misreading input/output format.
- Not handling constraints and edge cases.
- Off-by-one errors in loops.
- Forgetting to reset variables between test cases (if any).
Solution Guide
Problem
Render a list and add Up/Down buttons to reorder items.
Input / Output
Output
Render a React component.
Constraints
Update the array immutably by swapping indexes.
Details
Common Mistakes
- Misreading input/output format.
- Not handling constraints and edge cases.
- Off-by-one errors in loops.
- Forgetting to reset variables between test cases (if any).
Difficulty
Medium
ReactJS
Official Solution
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>
);
}
Solutions (0)
No solutions submitted yet. Be the first!
