How to render a component for particular element in a array-CodePudding

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

CodePudding user response：

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)

CodePudding user response：

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>

CodePudding user response：

You can do something like this

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

CodePudding user response：

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>
    </>
  );
};