I have an array, for which a component (<span>Delete</span>
in my case) needs to be shown only if the array length is greater than 2 and also, not show in first two array elements but show in other elements.
Example:
array = ["One","Two","Three","Four"]
Show <span>Delete</span>
in "Three" and "Four" as the array is greater than length 2.
In the above case, even if the array is greater than length 2 don’t show in first two elements ( "One" and "Two" ).
Code:
const App = () => {
const [element, setElement] = useState(["element"]);
return (
<>
{element.map((e) => (
<div>
<span>{e}</span>
{element.length > 2 && <span style={{color:"red"}}>{" "}Delete</span>}
</div>
))}
<button onClick={() => setElement((element) => [...element, "element"])}>Add</button>
</>
);
};
The above code shows "Delete" text in all the elements
instead should show only for elements after the 2nd index.
CodeSandbox: https://codesandbox.io/s/basic-antd-4-16-9-forked-2w3lg5?file=/index.js:98-478
>Solution :
Use the index of the element you’re iterating over (the second argument in the .map
callback) to check if the index is 2 or more – if so, you can show the delete, otherwise don’t show it.
const App = () => {
const [elements, setElements] = useState(["element"]);
return (
<>
{elements.map((e, i) => (
<div>
<span>{e}</span>
{elements.length > 2 && i >= 2 && <span style={{color:"red"}}>{" "}Delete</span>}
</div>
))}
(Because the state is an array, making its name plural makes a lot more sense than a singular element
, which sounds like an array item)