CODEWITHSUNDEEP
javascriptarraysreactjs
Sai Krishnadas
Sai Krishnadas

Reputation: 3409

How to render a component for particular element in a array

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

enter image description here

instead should show only for elements after the 2nd index.

enter image description here

CodeSandbox: https://codesandbox.io/s/basic-antd-4-16-9-forked-2w3lg5?file=/index.js:98-478

Upvotes: 0

Views: 88

Answers (4)

Chizaram Igolo
Chizaram Igolo

Reputation: 1143

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

Upvotes: 0

Heet Vakharia
Heet Vakharia

Reputation: 445

You can do something like this

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

Upvotes: 0

Som Shekhar Mukherjee
Som Shekhar Mukherjee

Reputation: 8168

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>

Upvotes: 0

CertainPerformance
CertainPerformance

Reputation: 370769

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)

Upvotes: 2

Related Questions