How to render a component for particular element in a array

Question

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

Answer 1

You also need to check if the index of the current item is greater than 1.

const App = () => {
  const [element, setElement] = React.useState(["element"]);

  return (
    <React.Fragment>
      {element.map((e, i) => (
        <div>
          <span>{e}</span>
          {i > 1 && element.length > 2 && <span style={{ color: "red" }}>Delete</span>}
        </div>
      ))}

      <button onClick={() => setElement((element) => [...element, "element"])}>
        Add
      </button>
    </React.Fragment>
  );
};

ReactDOM.render(<App />, document.getElementById("root"));

<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<div id="root"></div>

Answer 2

You can do something like this

{element.length > 2 && element.map((ele,index) => {
    if(index > 1){
        return <p>{ele}</p>
    }
    else{
        return <></>
    }
})}

Answer 3

You need to access the current index of the current element (e), so include that in the parameter list of map().

Secondly, the condition to check if the index (idx) is greater than or equal to (>=) 2.

const App = () => {
  const [element, setElement] = useState(["element"]);

  return (
    <>
      {element.map((e, idx) => (
        <div>
          <span>{e}</span>        
          {element.length && idx >= 2 && <span style={{color:"red"}}>{" "}Delete</span>}
        </div>
      ))}

      <button onClick={() => setElement((element) => [...element, "element"])}>Add</button>
    </>
  );
};