Wondering how could I display a separator at any position in JSX? For instance, I have the following list which displays text when clicking on the item:
The code is the following:
<Accordion>
{items.map((item, index) => (
<AccordionItem key={item.id} item={item} index={index} />
))}
</Accordion>
Having an object like this declaring the content of the list:
const items = [
{ label: "One", content: "lorem ipsum for more, see https://one.com" },
{ label: "Two", content: "lorem ipsum for more, see https://two.com" },
{
label: "Three",
content: "lorem ipsum for more, see https://three.com",
},
];
Now, I’d like to add a separator after the label "Two" to get something like this:
If we try the following way, I get active the element in index 0 and element in index2:
<Accordion>
{items.slice(0, 2).map((item, index) => (
<AccordionItem key={item.id} item={item} index={index} />
))}
<hr />
{items.slice(2).map((item, index) => (
<AccordionItem key={item.id} item={item} index={index} />
))}
</Accordion>
Then, getting this incorrect result:
Why it is happening this? Because my Accordion object is the following:
import { useState, createContext } from "react";
export const AccordionContext = createContext({
activeItemIndex: 0,
setActiveItemIndex: () => 0,
});
export const Accordion = (props) => {
const [activeItemIndex, setActiveItemIndex] = useState(0);
return (
<AccordionContext.Provider value={{ activeItemIndex, setActiveItemIndex }}>
<ul>{props.children}</ul>
</AccordionContext.Provider>
);
};
At the beginning activeItemIndex is 0, so when applying slice(2) the first element is also index 0 (however the element is at index 2).
How could I get the line right after the second element in the list?
Thanks a lot
2
Answers
You can use the index of the array to display the separator conditionally.
You can conditionally render the separator based on the current index.
Demo here
Dynamic Solution for any index value:
So if you see the above solution works for specific index i.e.
1
(means the second<AccordionItem />
). To make the separator position dynamic, you can pass a prop to theAccordion
component specifying the separator indices which you can then leverage to conditionally render the separator.Demo here