0
167
ViewsHow 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
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
3 answers
Answer question0
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)
0
You can do something like this
{element.length > 2 && element.map((ele,index) => {
if(index > 1){
return <p>{ele}</p>
}
else{
return <></>
}
})}
0
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>